文档已迁移到polyv帮助中心,本页面不再更新,请查看最新文档 HTML5 播放器使用文档>>

Polyv HTML5 Player Demo




如何使用



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

选项


wrap

  • 类型:string | HTMLElement
  • 说明:页面上存在需要载入播放器的DOM元素或css选择器

width / height

  • 类型:number | string
  • 默认值:width{'100%'}、height{'auto'}
  • 说明:播放器的宽度与高度

vid

  • 类型:string
  • 说明:从 polyv 后台上传的视频会生成一个视频专属vid

loop

  • 类型:boolean
  • 默认值:false
  • 说明:视频播放结束后是否循环播放

autoplay

  • 类型:boolean
  • 默认值:false
  • 说明:播放器加载后视频是否自动播放

volume

  • 类型:number
  • 说明:视频默认音量大小,范围 (0, 1),播放器会记录上一次播放的音量

flash

  • 类型:boolean
  • 说明:若设置为 true,则播放器将打开 flash 播放器

statistics

  • 类型:Object
  • 说明:用户自定义播放统计参数
  • 例子:
    
      statistics: {
        session_id: 'class_1', // 播放场次标识
        param1: '1',           //自定义参数,可设置4个
        param2: '2',
        param3: '3',
        param4: '4',
      }
    

df

  • 类型:number
  • 说明:视频默认清晰度,可设置为0、1、2、3,分别对应自动、流畅、高清、超清

hideRepeat

  • 类型:boolean
  • 说明:播放结束后是否显示重播面板,可通过play.HTML5.changeRepeat改变

code

  • 类型:string
  • 说明:跑马灯设置中自定义的code值

adSkip

  • 类型:boolean
  • 说明: 是否可以跳过广告

adMatter

  • 类型:array
  • 说明:自定义广告列表,可设置多个,设置后会覆盖后台广告设置
  • 例子:
    
     adMatter: [
        {
          addrurl: 'http://www.polyv.net/', //广告跳转链接
          adtype: 2,  //广告资源类型: 1 图片广告 、2 视频广告、3 swf广告(flash播放器生效)
          location: 1, //广告位置: 1 片头广告、2 暂停广告 、3 片尾广告
          timesize: 10, //广告时长(单位:秒)
          matterurl: 'test.mp4', //广告地址
          cataid: 1 //分类ID(可选,默认为 1)
        }
      ]
    

    视频广告只支持MP4格式

teaser_show

  • 类型: number
  • 说明:是否显示片头,0 不显示, 1 显示

teaser_url

  • 类型: string
  • 说明:片头地址(视频只支持mp4)

teaser_time

  • 类型: number(单位秒)
  • 说明:片头显示时长

teaserSkip

  • 类型: boolean
  • 说明:是否显示跳过片头按钮

speed

  • 类型: boolean
  • 默认值:true
  • 说明:是否显示倍速选择

ignoreIE

  • 类型: boolean
  • 默认值:false
  • 说明:设置该选项将会在ie浏览器中禁用HTML5播放器(edge浏览器除外,国内360,QQ等浏览器的兼容模式表现为ie浏览器,所以也会被禁用)

选项 - 加密视频


playsafe

  • 类型:string
  • 说明:服务器计算出的 token 若要播放加密视频才需要该参数,非加密视频可忽略
    token获取方式:
    
    // php
    function get_client_ip() {
      if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
      } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
          $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
      } else {
          $ipaddress = $_SERVER['REMOTE_ADDR'];
      }
        return $ipaddress;
    }
    
    $userId = 'your userId';       // polyv 提供的服务器间的通讯验证
    $secretkey = 'your secretkey';     // polyv 提供的接口调用签名访问的key
    $videoId = '65956867df8c717eb79136e05394122c_6';  // 视频对应vid
    $ts = time() * 1000;      // 时间戳
    $viewerIp = get_client_ip();  // 用户 ip
    $viewerId = '12345';      // 自定义用户 id
    $viewerName = 'testUser';  // 用户昵称
    $extraParams = 'HTML5';  // 自定义参数
    
    /* 将参数 $userId、$secretkey、$videoId、$ts、$viewerIp、$viewerIp、$viewerId、$viewerName、$extraParams
        按照ASCKII升序 key + value + key + value ... +value 拼接
    */
    $concated =  'extraParams'.$extraParams.'ts'.$ts.'userId'.$userId.'videoId'.$videoId.'viewerId'.$viewerId.'viewerIp'.$viewerIp.'viewerName'.$viewerName;
    
    // 再首尾加上 secretkey
    $plain = $secretkey.$concated.$secretkey;
    
    // 取大写MD5
    $sign = strtoupper(md5($plain));
    
    
    
    // 然后将下列参数用post请求  https://hls.videocc.net/service/v1/token 获取 token
    $url = 'https://hls.videocc.net/service/v1/token';
    $data = array('userId' => $userId, 'videoId' => $videoId, 'ts' => $ts, 'viewerIp' => $viewerIp, 'viewerName' => $viewerName, 'extraParams' => $extraParams, 'viewerId' => $viewerId, 'sign' => $sign);
    
    $options = array(
        'http' => array(
            'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
            'method'  => 'POST',
            'content' => http_build_query($data)
        )
    );
    $context  = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    
    // 获取返回结果的 token, 再传入 playsafe 中播放加密视频
    $token = json_decode($result)->data->token;
    
    
    
    var player = polyvPlayer({
      wrap: '#video',
      width: 800,
      height: 533,
      vid: '02bfeb00e2ea42ec033fedfbd24c2879_0',
      playsafe: '<?php echo $token ?>'  //传入服务器生成token
        });
      
    
  • ts

  • sign

实例属性:


isSupportHTML5

  • 类型:boolean
  • 说明:浏览器是否支持 HTML5 播放器,若返回 true 则播放器默认打开 HTML5 播放器,否则将打开flash 播放器
  • 亦可调用polyvPlayer.isSupportHTML5查询是否支持

HTML5

  • 类型:boolean | Object
  • 说明:若此时打开的是flash播放器则该属性为 false,反之为HTML5播放器的实例,该实例之后会说明

flash

  • 类型:boolean | Object
  • 说明:若此时打开的是HTML5播放器则该属性为 false,反之返回多终端代码初始化的实例,该实例之后会说明

实例方法


player.toFlash

  • 说明:切换到 flash 播放器

player.toHTML5

  • 说明:切换到 HTML5 播放器

player.destroy

  • 说明:销毁播放器,包括HTML5和flash播放器

另提供以下方法

j2s_getCurrentTime 、 j2s_getDuration 、 j2s_pauseVideo 、 j2s_resumeVideo 、 j2s_stopVideo 、 changeVid 、 j2s_stayInVideoTime 、 j2s_realPlayVideoTime 、 j2s_seekVideo 、 j2s_setVolume 、 changeRepeat 、 toggleFullscreen

  • 具体方法与flash播放器一致,具体参考播放器函数接口汇总
  • changeVid方法使用参考 player.HTML5.changeVid(options) 参数通过参数对象传入
  • toggleFullscreen只生效与HTML5播放器,因为浏览器安全限制,flash尚不支持

播放器切换事件


HTML5Load

  • 说明:HTML5 播放器切换到 flash 播放器时触发
                    
    player.on('HTML5Load', function() {
      console.log(typeof player.HTML5);  // 'object';
      console.log(player.flash);  // false
    });
                    
                  

flashLoad

  • 说明:flash 播放器切换到 HTML5 播放器时触发

HTML5 属性


若当前播放器为 HTML5播放器,player.HTML5属性为HTML5播放器实例对象,反之为false
  • 属性

    player.HTML5.video

                    
    player.HTML5.video.addEventListener('playing', function() {
      console.log('playing');
    })
      
    
  • 方法

    player.HTML5.play

    • 说明:播放视频

    player.HTML5.pause

    • 说明:暂停视频

    player.HTML5.togglePlay

    • 说明:暂停播放交替切换

    player.HTML5.toggleFullscreen

    • 说明:全屏非全屏交替切换
    • 全屏事件:player.HTML5.video 中可以通过绑定 fullscreenexitFullscreen事件来监听全屏与退出全屏事件

    player.HTML5.changeVid(options)

    • 参数:
      • options {Object}
        • vid(必填):需更换的vid,若与当前播放视频vid一样则无效
        • playsafe(选填): 若更换的视频为加密视频,需要传入playsafe参数,每个不同vid都需重新传入一个不同playsafe
        • autoplay(选填) {boolean}:切换视频后视频是否自动播放
        • code(选填):跑马灯设置中自定义的code值,不填则取上一个设置的值

    player.HTML5.changeRepeat(bool)

    • 参数:
      • bool{boolean}:改变hideRepeat值

flash属性


若当前播放器为 flash 播放器,player.flash属性为polyv多终端代码初始化播放器后返回对象,反之为false

参考:多终端代码

HTML5 播放器与 flash 播放器切换


  • 为了兼容不兼容HTML5播放器的浏览器,若检测到不兼容的浏览器或设置flash: true会自动打开flash播放器,比如IE10、IE9。
  • 播放器实例有 HTML5 与 flash 两个属性,根据当前播放器类型而切换
  • 可以设置 flashLoad 事件监听flash播放器是否加载
                    
    player.on('flashLoad', function() {
      console.log(typeof player.flash);  // 'function';
      console.log(player.HTML5);  // false
    });
      
    

与flash事件兼容


目前HTML5播放器兼容了部分flash播放器事件,设置后在HTML5播放器中也会触发,事件如下

s2j_onVideoPlay、s2j_onVideoPause、s2j_onPlayerInitOver、s2j_onPlayOver、s2j_onPlayStart、s2j_onFullScreen、s2j_onNormalScreen、s2j_onVideoSeek、s2j_onReadyPlay、s2j_onPlayerError
            
function s2j_onVideoPlay(vid) {
  console.log(vid);
};
  

详情参考:flash播放器事件

兼容性


  • pc:IE11(window 8+)或以上浏览器兼容HTML5播放器,IE10、IE9将打开flash播放器
  • 移动端:将调用多终端代码打开播放器
  • 因用ES2015编写,暂不兼容IE8

在多终端代码中使用 HTML5 播放器


页面中只需引入多终端代码,不需引入 HTML5 播放器代码,切换是会自动加载

默认打开flash视频

  • 参数:skin_type: 'skin_blue' ban_set_player: 'off'
  • changeH5Success:当点击切换 HTML5 播放器时触发且只会在默认打开 flash 播放器时触发
  • 说明:该设置会默认打开 flash 播放器,但播放器中会有切换播放器的选项
  • 设置如下
                    
    var player = polyvObject('#video').videoPlayer({
        width: 800,
        vid: '02bfeb00e2ea42ec033fedfbd24c2879_0',
        flashvars: {
          skin_type: 'skin_blue',
          ban_set_player: 'off'
        }
    });
    player.on('changeH5Success', function(newPlayer) {
      player = newPlayer;  // newPlayer 是初始化 HTML5 播放器后返回对象
    });
      
    

默认打开HTML5 播放器

  • 参数:forceH5
  • 说明:设置 forceH5 参数为 true 后播放器将默认打开 HTML5 播放器(浏览器不兼容除外),若需要播放加密视频需传入 playsafe 参数
  • 设置如下:
      
    // 返回 HTML5 播放器对象
    var player = polyvObject('#video').videoPlayer({
        width: 800,
        vid: '65956867dfc7794f00b20912e5ea5ecc_6',
        forceH5: true,
        // playsafe: 'token' 加密视频需传入
    });