阿里云播放器相较于video标签 兼容性更强，能支持更多格式的视频，所以在开发的时候阿里云播放器也用的很多
代码如下：
html代码
<template><div class="player-wrapper"><div class="prism-player" :id="playerId"></div></div></template>
js代码
组件传值：
必传： resource对象 包含bigCover（封面）, viewPath（视频路径）
可传：isRecordPlayTime（是否记录播放时间）， lastPlayTime（上次播放时间）
<script>const cssUrl = '/de/prismplayer/2.8.1/skins/default/aliplayer-min.css'const jsUrl = '/de/prismplayer/2.8.1/aliplayer-min.js'export default {name: 'VideoPlayer',props: {resource: {type: Object,default: () => {},},isRecordPlayTime: {type: Boolean,default: false},lastPlayTime: {type: Number,default: 0}},components: {},computed: {},data () {return {playerId: `player-${Math.random().toString(36).substr(2).toLocaleUpperCase()}`,recordTimerInterval: 1000 * 60 * 2, // 记录播放资源的时间间隔 2分钟recordTimer: null}},filters: {},created () {},mounted () {},destroyed () {clearInterval(this.recordTimer)},watch: {resource: {handler (newValue, oldValue) {if (newValue && newValue.id) {this.$nextTick(() => {this.loadAliPlayer(() => {this.initAliPlayer(newValue)})})}},deep: true,immediate: true,},},methods: {initAliPlayer (resource) {const {bigCover, viewPath } = resourceconst width = 1180const height = (width / 16) * 9const player = new Aliplayer({id: this.playerId,source: viewPath,width: '100%',height: height + 'px',autoplay: false,isLive: false,cover: bigCover,rePlay: false,playsinline: true,preload: false,controlBarVisibility: 'hover',useH5Prism: true,waitingTimeout: 600,skinLayout: [{name: 'bigPlayButton',align: 'cc',},{name: 'H5Loading',align: 'cc',},{name: 'errorDisplay',align: 'tlabs',x: 0,y: 0,},{name: 'infoDisplay',},{name: 'tooltip',align: 'blabs',x: 0,y: 56,},{name: 'thumbnail',},{name: 'controlBar',align: 'blabs',x: 0,y: 0,children: [{name: 'progress',align: 'blabs',x: 0,y: 44,},{name: 'playButton',align: 'tl',x: 15,y: 12,},{name: 'timeDisplay',align: 'tl',x: 10,y: 7,},{name: 'fullScreenButton',align: 'tr',x: 10,y: 12,},{name: 'setting',align: 'tr',x: 15,y: 12,},{name: 'volume',align: 'tr',x: 5,y: 10,},],},],}, (player) => {this.handlePlayerTime(player)})},loadAliPlayer (callback) {// 同一个页面如果存在多个播放器，播放器的js、css 文件只加载（插入）一次// 其他播放器定时检测Aliplayer，待播放器的js、css 文件加载完成，再初始化if (!window.Aliplayer && !window.aliPlayerLoading) {window.aliPlayerLoading = truethis.insertFile({url: cssUrl,type: 'css',id: 'aliPlayerCss'})this.insertFile({url: jsUrl,type: 'js',id: 'aliPlayerJs'}, callback)} else {this.loadAliPlayerTimer = setInterval(() => {if (window.Aliplayer) {clearInterval(this.loadAliPlayerTimer)callback()}}, 500)}},insertFile ({url: fileUrl, type: fileType, id },callback = () => {}) {const map = {js: {element: 'script', type: 'text/javascript', link: 'src' },css: {element: 'link', type: 'text/css', link: 'href', rel: 'stylesheet' }}const element = document.createElement(map[fileType].element)element.id = idfor (const key in map[fileType]) {const value = map[fileType][key]if (key !== 'element') {if (key === 'link') {element.setAttribute(value, fileUrl)} else {element.setAttribute(key, value)}}}if (!document.getElementById(id)) {document.getElementsByTagName('head')[0].appendChild(element)element.addEventListener('load', callback)} else {callback()}},handlePlayerTime (player) {// 处理需要记录播放时间的场景if (this.isRecordPlayTime) {// 跳转到某个时间点if (this.lastPlayTime) {player.seek(this.lastPlayTime)}this.registerPlayerEvent(player)}},savePlayerTime (isFinish, player) {const duration = player.getDuration()// 资源播放最小时长const RES_MIN_TIME = 5// 小于最小时长，不记录if (duration < RES_MIN_TIME) {this.$message.error(`资源时长不能小于${RES_MIN_TIME}秒，记录学习时长失败，请联系管理员`)} else {const currentTime = player.getCurrentTime()const data = {studyTime: isFinish ? duration : currentTime,totalTime: duration,isFinish}this.$emit('save-time', data)this.saveTimeFinished = isFinish}},registerPlayerEvent (player) {player.on('startSeek', (time) => {this.startSeekTime = Math.max(time.paramData, this.startSeekTime || 0)})player.on('completeSeek', (time) => {// 已完成整个资源播放，不影响拖动if (this.saveTimeFinished) return// 未完成整个资源播放，只能在已播放的进度区域拖动if (time.paramData > this.startSeekTime) {player.seek(this.startSeekTime)}})player.on('ended', (something) => {const isFinish = truethis.savePlayerTime(isFinish, player)})player.on('play', () => {if (this.saveTimeFinished) returnif (this.recordTimer) clearInterval(this.recordTimer)this.recordTimer = setInterval(() => {const isFinish = falsethis.savePlayerTime(isFinish, player)}, this.recordTimerInterval)})player.on('pause', () => {// 播放完 或 暂停 触发clearInterval(this.recordTimer)})}},}</script>
css代码
<style lang="scss">.prism-big-play-btn {transform: translate(-50%, -50%);}.player-wrapper {position: relative;z-index: 0;}</style>
