贾迎博 2020-11-26 17:48:41

由于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版参数固定为几位

注意事项

  1. 使用videoHack初始化的播放器,调用api的方式为 videoPlayer.api;(可使用api参阅H5播放器文档
  2. 最好不要传入width,height参数,使用定义外部容器的方式代替,以免在调用不支持此属性的H5播放器时出现异常情况;
  3. 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
            })
        }
    });

具体示例

点击查看demo