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

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

 // 视频播放器的容器

在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, '
试看结束
', '']
        }]
        }, 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；