html5视频播放器代码调用实例(视频切换\倍速切换)

保利威直播

于 2023-05-18 18:59:42 发布

阅读量2.6k

点赞数

分类专栏：点播WebSDK 文章标签： javascript 前端实时音视频

本文链接：https://blog.csdn.net/sinat_33049251/article/details/130753005

版权

本文详细介绍了HTML5视频播放器的初始化、尺寸设置、视频切换、倍速控制、清晰度选择、预览模式、自定义播放时间、续播、样式定制和禁止拖拽进度等功能，提供相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

图 / 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>