h5阿里云视频播放器试看功能

阿里云视频播放器使用，需要一个容器

<div id="player-con"></div> // 视频播放器的容器

在 Vue 中

import Aliplayer from 'Aliplayer'
import AliPlayerComponent from 'AliPlayerComponent'

在 vue.config.js 中定义

module.exports = {
    configureWebpack: config => {
        config.externals = {
          Aliplayer: 'Aliplayer',
          AliPlayerComponent: 'AliPlayerComponent'
        }
    }
}

在 created() 钩子函数中调用初始化播放器
这里使用的是 playauth 模式

_this.player = new Aliplayer({
        id: "player-con",
        cover,
        vid,
        playauth,
        width: "100%",
        height: "100%",
        autoplay: false,
        isLive: false,
        rePlay: false, // 播放器自动循环播放。playsinline: true, // H5 是否内置播放，有的 Android 浏览器不起作用。preload: true, // 播放器自动加载，目前仅 h5 可用。useH5Prism: true, //     指定使用 H5 播放器。// skinLayout 可以自定义
        components: [{ // 试看组件的属性
          name: 'PreviewVodComponent',
          type: AliPlayerComponent.PreviewVodComponent,
          args: [2, '<div class="tip-box"> 试看结束 </div>', '']
        }]
        }, function (player) {player.on('timeupdate', () => { // 播放位置发生改变时触发，仅 H5 播放器。let time = player.getCurrentTime() // 获取播放的时间
            if (time >= 2) {
              // 时间达到试看时间后把对应的 video 隐藏，防止安卓浏览器劫持不显示试看组件的提示
              document.querySelector('video').style.display = 'none'
              document.querySelector('.prism-big-play-btn').style.width = '0'
              _this.seeEnd = true
              // player.off('timeupdate') // 取消订阅该事件
            }
          })
          // 试看结束后元素需要做的事情在这里处理
          document.querySelector('.tip-box').addEventListener('click', function () {console.log('试看结束弹窗 click 事件')
          })
        }
      )

document.querySelector(‘video’).style.display = ‘none’
因为部分安卓不支持试看，其原因是安卓的浏览器劫持了视频，播放使用的不是我们的播放器而是自己的播放器，此时试看结束的弹窗就不会出现，这里在试看结束的时候将 video 标签隐藏，此时浏览器的播放器就不起作用力，此时我们试看的那个弹窗就会出现。
document.querySelector(‘.prism-big-play-btn’).style.width = ‘0’
该操作是为了去掉暂停按钮，因为我们的项目中的试看结束有会有一个暂停按钮，此时蒙层后面还有一个暂停按钮，使用这个就不显示了，display：none, 不能处理因为在这之后还会去调用暂停事件，暂停的时候会将这个重新改为 block，如果在暂停的事件中处理使用 setTimeout 事件中可以处理，但是会有闪动，因此我们使用的 width = 0；