html5视频播放器代码调用实例(视频切换\倍速切换)-Toy模板网

这篇具有很好参考价值的文章主要介绍了html5视频播放器代码调用实例(视频切换\倍速切换)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文将对视频播放相关的功能进行说明，包括初始化播放器、播放器尺寸设置、视频切换、倍速切换、视频预览、自定义视频播放的开始/结束时间、禁止拖拽进度、播放器皮肤、控件按钮以及播放控制等。

$html5视频播放器代码调用实例(视频切换\倍速切换),点播WebSDK,javascript,前端,实时音视频$

图 / html5视频播放器调用效果（倍速切换）

$html5视频播放器代码调用实例(视频切换\倍速切换),点播WebSDK,javascript,前端,实时音视频$

图 / html5视频播放器调用效果（超清/高清/流畅画质切换）

初始化播放器

Polyv Web播放器同时支持Flash和HTM5两种播放模式，并可以根据终端和浏览器环境自动选择最优播放模式。默认优先使用HTML5，在不支持HTML5播放的浏览器下（如低版本的IE浏览器）会自动切换到Flash播放。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: 800,
    height: 533,
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});

player.on('s2j_onPlayStart', () => { //订阅视频开始播放事件
    console.info('视频开始播放');
    player.j2s_seekVideo(60); //视频seek到第60秒
});
</script>

更多设置功能请查阅：属性和接口说明。

可通过 player.isSupportHTML5 检测当前浏览器是否支持 H5 播放。若当前浏览器（如IE9、IE10）不支持 H5 ，会自动切换为Flash播放器。

请尽量不要对播放器的样式进行修改或者对video标签进行修改。

尽量避免在有animation和transform等css3的元素或者子元素下初始化播放器，因为这些元素可能会导致播放器全屏样式错乱，这属于浏览器的一个bug，请谅解。

播放器尺寸设置

播放器的尺寸可通过 width和height两个参数进行设置。参数支持像素和百分比类型的值。

代码示例：

<div id="player"></div>
<script src="//player.polyv.net/script/player.js"></script>
<script>
var player = polyvPlayer({
    wrap: '#player',
    width: '80%', // 播放器宽，支持像素值和百分比两种类型，默认值为'100%'
    height: '60%', // 播放器高，支持像素值和百分比两种类型，默认值为'auto'
    vid: '88083abbf5bcf1356e05d39666be527a_8',   
});
</script>