Web播放器基础功能和参数设置 - 视频点播

在使用Web播放器的过程中，常用的功能可能由于播放模式、播放方式或浏览器环境的不同而需要不同的设置。本文提供Web播放器基础功能的使用示例。

常用设置

H5模式和Flash模式播放FLV和HLS视频需要配置跨域访问。配置方法请参见配置跨域访问。

H5模式如未配置跨域访问，播放时浏览器会报以下错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Flash模式如未配置跨域访问，播放时浏览器会报以下错误：

说明

全屏播放后可通过input设置绝对定位来唤起软键盘。

接口调用规则

Web播放器的基础功能由属性或接口实现。

说明

属性和接口的详细描述请参见接口说明。

接口的调用规则如下：

HTML5播放模式

在创建播放器构造函数的回调函数里调用。示例如下：

//H5播放模式
 var player = new Aliplayer({},function(player) {
    player.play();
 });

Flash播放模式
在ready事件发生之后或创建播放器ready回调里调用。示例如下：
```
//Flash播放模式
 player.on('ready',function(e) {
    player.play();
 });
```

控制播放

Web播放器支持从指定时间点播放和暂停播放等操作。H5模式和Flash模式使用的接口一样。

从指定时间开始播放

指跳转到某个时刻进行播放，由seek接口实现。示例如下：

//time为指定的时间，单位：秒。
player.seek(time)

暂停播放

指暂停播放视频，由pause接口实现。示例如下：

player.pause()

说明

如需展示大播放按钮，则需传入参数true，设置示例：player.pause(true)。

设置显示模式

Web播放器仅H5模式支持旋转、镜像等显示设置。

说明

支持桌面端和iOS的浏览器。
支持Android（Chrome浏览器、Firefox浏览器）。
微信和大部分浏览器，由于视频被劫持播放，使用自带的播放器，所以不支持此功能。

旋转

指画面按指定角度旋转，由setRotate接口实现。设置后还可查询旋转角度。示例如下：

//设置旋转角度。<角度>正数为顺时针旋转，负数为逆时针旋转。如：player.setRotate(180)表示顺时针旋转180度。
player.setRotate(<角度>)
//获取旋转角度。
player.getRotate()

镜像

支持水平镜像和垂直镜像，由setImage接口实现。示例如下：

//水平镜像
player.setImage('horizon')
//垂直镜像
player.setImage('vertical')

此外，Web播放器还提供两个属性videoHeight和videoWidth用于设置视频的宽度和高度，高度和宽度一般比容器的小，这样旋转和镜像时不会溢出到父容器外面，示例如下：

 width: '100%', //容器的大小
 height: '100%', //容器的大小
 videoHeight:"200px", //视频的高度大小

获取播放信息

Web播放器支持获取当前的播放进度和播放时长信息。

获取当前播放进度

指获取当前的播放时刻，由getCurrentTime接口实现。示例如下：

//接口返回的时间单位为秒。
player.getCurrentTime()

获取播放时长

指获取视频总时长。需要在视频加载完成以后才可以获取到，可以在play事件后获取。由getDuration实现，示例如下：

player.getDuration()

监听播放状态

指监听播放器的状态。由getStatus接口实现。返回值包括：

init：初始化。
ready：准备。
loading：加载中。
play：播放。
pause：暂停。
playing：正在播放。
waiting：等待缓冲。
error：错误。
ended：结束。

示例如下：

player.getStatus()

设置音量

设置音量包括音量调节和静音设置。

说明

由于video.volume在iOS 和一些Android系统中是可读属性，阿里云Web播放器提供的音量调节方法getVolume和setVolume在iOS系统和部分Android系统会失效。

音量调节

指调节音量大小，由setVolume接口实现。设置后还可获取音量信息。示例如下：

//volume的值为0～1之间的实数。
player.setVolume(0)
//获取音量信息。
player.getVolume()

静音设置

指将播放中的视频设置为静音状态，由mute接口实现。示例如下：

// 设置静音
player.mute();
// 取消静音
player.unMute();

倍速播放

仅H5模式支持倍速播放。Web播放器SDK默认的UI自带倍速功能，用户观看时可通过界面选择倍速。如果自定义UI，可通过setSpeed接口实现倍速功能。

说明

关闭倍速设置请参见接口说明中关于setSpeed的描述。

示例如下：

//设置倍速。以下示例表示设置为2倍速。
player.setSpeed(2)

多清晰度播放

指通过设置多路清晰度流的地址，达成多清晰度播放的效果。

如果使用VID+PlayAuth方式播放，无需额外设置。Web播放器SDK会从点播服务获取清晰度列表。观众点击播放界面控制栏里的设置按钮可以看到清晰度列表。
说明
VID+PlayAuth方式下，H5播放模式可以通过设置format属性选择播放MP4或MP3播放格式，默认为MP4格式播放。
如果使用URL播放方式播放（即通过设置source属性播放），需要在source属性设置中通过JSON结构的键值对（Key-Value Pair）指定多路清晰度流的地址。设置生效后观众点击播放界面控制栏里的设置按钮可以看到清晰度列表。

说明

如需改变清晰度列表的UI，可以通过引用清晰度组件实现。代码示例请参见功能展示。

URL播放方式下，source属性设置中可通过JSON结构的键值对（Key-Value Pair）包括：

   "OD": "<原画URL>"
   "FD": "<流畅URL>"
   "LD"："<标清URL>"
   "SD": "<高清URL>"
   "HD": "<超清URL>"
   "2K": "<2K URL>"
   "4K": "<4K URL>"

以下是URL播放方式设置清晰度的示例代码：

//示例设置清晰度为超清和高清的地址。
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

Web播放器还支持通过设置qualitySort属性，表示启用升序还是降序排列清晰度。

desc表示按倒序排序（从大到小排序）。
asc表示按正序排序（从小到大排序）。

说明

清晰度切换会记住用户当前选择的清晰度，下次重新打开播放视频时，会优先选择上次选择的清晰度，没有则按默认逻辑选择低清晰度播放。
用户选择的清晰度不能播放时，会自动切换到下一个清晰度并提示，仅H5支持。

循环播放

Web播放器支持通过设置rePlay属性或监听ended事件实现循环播放。

设置rePlay属性示例

rePlay:true

监听ended事件示例

player.on('ended',function(){
   player.replay()
})

视频点播：基础功能