cnpm i plyr
https:
<template>
<div>
<video id="player" controls webkit-playsinline="true" playsinline="true" x5-playsinline>
<p> 你的浏览器不支持 HTML 视频。可点击<a :href="videoDetail?.url">此链接</a>观看。</p>
</video>
</div>
</template>
<script>
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';
export default {
data() {
return {
videoDetail: {}, // 视频详情
player: null, // plyr播放器
}
},
methods:{
videoInit() {
this.player = new Plyr('#player', {
settings: ['captions', 'quality', 'fullscreen'],
// fullscreen: { iosNative: true },
});
// iosNative设置后 在浏览器里全屏后会使用原生iOS播放器的控件，在app里 全屏后控件不会显示。
this.player.source = {
title: this.videoDetail?.videoName,
type: 'video',
sources: [
{
src: this.videoDetail?.url,
type: 'video/mp4',
},
],
poster: this.videoDetail?.imgUrl,
};
// 可以监听控件的响应事件 对应的样式也可自行调整
this.player.on('enterfullscreen', () => {
// console.log('enterfullscreen',document.getElementsByTagName('video')[0]);
document.getElementsByTagName('video')[0].classList.add('plyr__poster_fullscreen');
document.getElementsByClassName('plyr__poster')[0].classList.add('plyr__poster_fullscreen');
});
this.player.on('exitfullscreen', () => {
// console.log('exitfullscreen',document.getElementsByClassName('plyr__poster')[0]);
document.getElementsByTagName('video')[0].classList.remove('plyr__poster_fullscreen');
document.getElementsByClassName('plyr__poster')[0].classList.remove('plyr__poster_fullscreen');
});
},
},
}
</script>
