HTML5怎么添加视频?附三种方法!

HTML5怎么添加视频?附三种方法!

在网页开发中,免不了需要涉及到插入视频的开发,比如我们常见的淘宝商品视频介绍。那么 HTML 怎么添加视频呢?这篇文章告诉你 HTML 三种添加视频的方法。

方法一:

​标签是 HTML5 的一个新特性,它用于在 HTML 页面嵌入视频元素。具体使用方法如下:

方法二:标签

​标签的作用是在 HTML 页面中嵌入多媒体元素。具体使用方法如下:

但是并不常被使用,因为它仅支持用 flash 播放,如果浏览器不支持 flash,则视频不能播放。

方法三:<第三方JS代码>标签

具体使用方法如下:

初始化播放器

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

代码示例:

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

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

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

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

播放器尺寸设置

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

代码示例:

如果不指定参数width的值,播放器宽会使用默认值:100%,即与父容器的宽一致。

如果不指定参数height的值,播放器高会使用默认值:'auto',即根据视频分辨率比例自动适配。

视频切换(连续播放)

当前播放器实例可以使用changeVid接口切换正在播放的视频。当有多个视频,在上一个视频播放完毕时,自动播放下一个视频时也可采用该处理方式。

代码示例:

const option = {

vid: '88083abbf5bcf1356e05d39666be527a_8',

//autoplay: true,

//playsafe: '', //PC端播放加密视频需要传playsafe参数

//sign: '',// 移动端H5播放加密视频需要传 sign、ts参数

//ts: '',

//watchStartTime: 100, // 从第100秒开始播放

//skipTeaser: false, //切换视频后是否跳过片头直接播放正片

//ban_seek: 'off', // 是否禁止拖拽进度,值为'on'时将会禁止拖拽进度。

//ban_seek_by_limit_time: 'off', // 是否禁止拖拽进度至视频未播放的位置,为'on'时只可在已播放过的进度范围内拖拽(向前拖拽)。

viewerInfo: { //切换视频时设置观众信息,非必填

viewerId: '1555313336634', // 观众ID

viewerName: 'polyv', // 观众昵称

viewerAvatar: 'https://my.domain.com/user/avatar.png', // 观众头像URL

viewerExtraInfo1:'', // 自定义额外信息字段1

viewerExtraInfo2:'', // 自定义额外信息字段2

viewerExtraInfo3:'' // 自定义额外信息字段3

}

};

player.on('s2j_onPlayOver', () => {

console.info('视频播放完毕');

player.changeVid(option); // 切换下一个视频

});

清晰度切换

视频上传保利威云点播平台后会转码成多个清晰度的视频文件,详见​ 视频清晰度与码率。 ​可通过参数和接口控制清晰度的选择和切换。

代码示例:

倍速切换

H5播放器默认开启倍速播放功能。可通过参数进行自定义控制。

代码示例:

线路切换

保利威视频云拥有多条CDN加速线路,当某一条线路出现问题时,可切换至另一线路。

代码示例:

注:线路切换暂时只支持在移动端H5播放器上使用。

视频预览

在一些场景下,希望只允许观众观看视频的一部分,付费或者注册后才允许观看完整视频。该场景可通过传入预览vid或者设置参数使用预览模式来实现。预览vid可通过管理后台的预览代码来获取,预览时长可在点播管理后台进行设置。

代码示例:

当传入预览vid时,不需要设置preview参数。当preview = true时,传入真实vid即可。

自定义视频播放的开始/结束时间

播放器支持通过参数来指定视频开始/结束播放的时间点。

代码示例:

续播

播放器默认会记录视频上次观看到的时间点,在同一浏览器中再次打开播放页面,可从上次观看的时间点继续播放。

代码示例:

播放器只会在视频播放10秒后至视频结束10秒前的时间段内正常记录续播点。播放不足10秒不续播,播放到了最后10秒但未播完,续播点在结束前10秒,播完后不续播。

自定义播放器外观和控件

播放器的皮肤外观以及控件按钮可通过管理后台的播放器设置或者参数进行自定义设置。

禁止拖拽进度

在部分教育和培训场景下,希望能够强制学员看完视频,不允许拖拽进度。可通过播放器参数进行控制:

Android系统下各厂商浏览器表现不一致,ban_seek参数可能不生效。

自定义视频封面图

上传至云点播平台的视频会在编码时进行截图,默认会采用第一张截图作为视频封面图。用户可以在点播管理后台重新选择或上传封面图,也可以通过播放器参数进行自定义设置。

支持加密,效果如下:

▲ 效果截图

我的热门文章推荐

多路视频直播用在线云导播切换的效果测试如何把视频转换生成二维码,扫码直接播放?有哪些网站上传视频是不会插入广告的?怎么把视频生成二维码?微信扫二维码就可以观看?不要广告的常用照片尺寸对照表,照片大小看这个表就对了视频直播推流攻略(整理的各大平台推流界面)

🎊 相关推荐

网络信息安全课程:对于匿名身份认证协议的学习
365账号限制投注怎么办

网络信息安全课程:对于匿名身份认证协议的学习

📅 10-27 👀 5887
徐健顺:我们为什么要吟诵?
英国365bet

徐健顺:我们为什么要吟诵?

📅 10-05 👀 6924
Win10怎么关休眠模式?3种方法彻底禁用休眠