H5视频播放组件
预览:
使用:
<my-tc-player-v1 :options="options"></my-tc-player-v1>
import MyTcPlayerV1 from '@/components/my-tc-player/my-tc-player-v1'
export default {
components: {
MyTcPlayerV1
},
data() {
return {
options: {
controls: true, //是否显示视频控件
width: "100%", //视频宽度
height: "200px", //视频高度
isAutoPlay: true, //是否自动播放
srcActions: [ //视频清晰度选择
{
text: '标清',
src: '标清视频链接',
},
{
text: '高清',
src: '高清视频链接',
},
{
default: true,
text: '普通',
src: '普通视频链接',
}
],
playbackRateActions: [ // 视频倍速选择
{
text: '×2',
value: 2,
},
{
text: '×1.5',
value: 1.5,
},
{
text: '×1.25',
value: 1.25,
},
{
default: true,
text: '×1',
value: 1,
}
]
},
}
}
}
控件功能实现:
this.myvideo = document.getElementById("myTcplayer") //视频dom
- 视频播放与暂停
// 点击播放
playVid() {
this.myvideo.play(); //this.myvideo = document.getElementById("myTcplayer")
var interval = setInterval(() => {
this.duration = this.myvideo.duration; //获取视频播放总时长
this.currentTime = this.myvideo.currentTime; //获取视频当前播放时间,每秒刷新一次
if(this.duration && this.currentTime === this.duration) {
// 播放到底时停止运行
this.isPause = false;
clearInterval(interval) //清除定时器
return false
}
}, 1000);
this.isPause = true; //显示暂停icon
},
// 点击暂停
pauseVid() {
this.myvideo.pause();
this.isPause = false; //显示播放icon
},
- 拖拽视频播放进度条
rangeChange() {
this.myvideo.currentTime = this.currentTime
this.playVid()
},
- 切换视频倍速
rateSelect(val) {
this.myvideo.playbackRate = val.value //默认1倍速时value=1
this.defaultRate = val
this.$toast(
{
message: '已切换' + val.value + '倍速',
position: 'top',
}
);
},
- 点击全屏
fullScreen() {
if (this.myvideo.requestFullscreen) {
this.myvideo.requestFullscreen();
} else if (this.myvideo.mozRequestFullScreen) {
this.myvideo.mozRequestFullScreen();
} else if (this.myvideo.msRequestFullscreen) {
this.myvideo.msRequestFullscreen();
} else if (this.myvideo.oRequestFullscreen) {
this.myvideo.oRequestFullscreen();
} else if (this.myvideo.webkitRequestFullscreen) {
this.myvideo.webkitRequestFullScreen();
} else {
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('myTcplayer');
var cssText = 'width:100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
},
- 点击视频界面时触发(视频控件隐藏与显示)
touchStart() {
let _this = this
if(this.myTcplayerControls.style.display === 'none') {
this.myTcplayerControls.style.display = 'block'
setTimeout(function(){
_this.myTcplayerControls.style.display = 'none'
},7000);
} else {
this.myTcplayerControls.style.display = 'none'
}
},