阿里云视频播放器使用，需要一个容器
<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；