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；