文档首页 > > 播放器SDK> Web播放器> 常用功能说明

常用功能说明

分享
更新时间:2020/06/12 GMT+08:00

华为云提供的Web播放器除了提供点播和直播的基本播放功能外,还支持点播书签播放、倍速播放、清晰度切换等。直播播放暂不支持这些功能。

书签播放

  1. 在退出播放前获取和保存当前播放位置,也可以设置定时间隔保存。可将书签保存至本地缓存或上传至服务器(云端书签)。
    1
    videoPlayer.currentTime();  //获取当前播放位置
    
  2. 再次播放时,需要先从本地缓存或服务器上获取播放地址,并设置当前播放时间,即可从上次播放位置开始播放了。
    1
    videoPlayer.currentTime(time);  //time为你此前缓存的播放位置
    

倍速播放

华为Web播放器支持倍速播放功能,暂仅支持IE8e及以上版本的IE浏览器,支持的播放格式暂只有MP4。

  • 可在播放器初始化时配置倍速菜单,推荐设置倍速值范围是0.5-2。
    1
    2
    3
    var videoPlayer = new HWPlayer(id, {
        playbackRates: [1, 2, 3]
    });
    
  • 若有需要,也可以自行调用倍速方法。
    1
    2
    videoPlayer.playbackRate();  //获取当前播放倍速
    videoPlayer.playbackRate2;//双倍速度播放当前视频
    

清晰度切换

播放器提供清晰度切换功能,具体使用方法如下所示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//设置视频清晰度切换
videoPlayer.updateSrc([
    {
        src: "//path/to/OP.mp4",
        type: 'video/mp4',
        label: '原画'
    },
    {
        src: "//path/to/HD.mp4",
        type: 'video/mp4',
        label: '高清'
    },
    {
        src: "//path/to/SD.mp4",
        type: 'video/mp4',
        label: '标清'
    },
    {
        src: "//path/to/FLUENT.mp4",
        type: 'video/mp4',
        label: '流畅'
    }
]);

实现后的效果如下所示:

加载字幕

播放器支持加载在线字幕到当前视频中。
1
player.loadSubtitles(url);//加载在线字幕,加载后会在播放器控制栏显示字幕菜单按钮

url为字幕文件的地址,必须为webvtt格式的字幕。

字幕支持调整字体等样式:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
player.textTrackSettings.setValues({
    backgroundColor: "#F00",//背景色
    backgroundOpacity: "1",//背景透明度
    color: "#000",//字体颜色
    fontFamily: "proportionalSansSerif",//字体
    textOpacity: "1",//字体透明度
    windowColor: "#000",//
    windowOpacity: "0"//
})
player.textTrackDisplay.updateDisplay();//设置完字体样式后,必须刷新字幕
其中,相关参数的取值如下:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const color = [
    "#000", //黑色
    "#FFF", //白色
    "#F00", //红色
    "#0F0", //绿色
    "#00F", //蓝色
    "#FF0", //黄色
    "#F0F", //紫红色
    "#0FF", //青色
]
const opacity = [
    0.5,//半透明
    1,//不透明
    0//透明
]
分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问