由于flash播放器将于21年彻底被放弃,所以将原先使用搜狐视频flash版本播放器的官网等迭代至H5版本, 出于兼容性考虑,将播放策略调整为,在IE11以下浏览器调用flash播放器,其余使用H5版本,为方便使用,将调整后的播放策略与原有的使用方法进行二次封装整合。
videoHack使用说明
H5版本文档:点击查阅 ! ! ! 注意:使用videoHack初始化的播放器,调用api的方式为 videoPlayer.api
flash版本文档:暂无
简单示例
// dom
<div class="video_box">
// <span></span>使用flash版本时会在容器中追加此元素,因为flash版本播放器初始化时会替换原有元素。
</div>
// js
// new videoHack().play('元素选择器', {设置项}, '强制调用flash播放器')
var video = new videoHack().play('selector', {
vid: 190964080
})
参数说明
属性名 | 说明 | 类型 | 默认 | 是否必填 |
---|---|---|---|---|
width | 仅对flash版本播放器生效,H5版本无此参数 | Number | 100% | 否 |
height | 同width | Number | 100% | 否 |
autoPlay | 自动播放,由于主流播放策略调整,现有的浏览器大多不支持自动播放,需要用户与页面交互之后才会允许播放 | Boolean | true | 否 |
vid | 视频的vid, 点击查看如何获取 | String|Number | undefined | 是 |
flash版本由于缺少文档,初始化时会将所有videoHack初始化时传入的参数采纳
H5版参数固定为几位
注意事项
- 使用videoHack初始化的播放器,调用api的方式为 videoPlayer.api;(可使用api参阅H5播放器文档)
- 最好不要传入width,height参数,使用定义外部容器的方式代替,以免在调用不支持此属性的H5播放器时出现异常情况;
- flash版本时会在容器中追加一个span,因为flash版本播放器会替换初始化时传入的元素。
cms调用示例
// dom
<div class="cms_content_video cms_content_video_300" video-id="191973231"><span>游戏实景视频</span></div>
<div class="cms_content_video" video-id="190964080"><span>游戏实景视频</span></div>
<div class="cms_content_video" video-id="6437935"><span>游戏实景视频</span></div>
// js
$('.cms_content_video').each(function () {
var video_id = $(this).attr("video-id"), querySec = 'cms_content_video_' + Math.floor(Math.random() * 10000);
$(this).addClass(querySec);
if (video_id) {
var video = new videoHack().play('.' + querySec, {
vid: video_id,
autoPlay: false
})
}
});