import { defineComponent, PropType } from 'vue';
import styles from './index.module.less';
import Plyr from 'plyr';
import 'plyr/dist/plyr.css';
import { Button, Icon, Loading, Toast } from 'vant';
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.css';
// import iconVideoPlay from '@/common/images/icon_video_play.png';
// import { browser } from '@/helpers/utils';
export default defineComponent({
name: 'o-video',
props: {
setting: {
type: Object,
default: () => {}
},
controls: {
type: Boolean,
default: true
},
height: String,
src: {
type: String,
default: ''
},
poster: {
type: String,
default: ''
},
styleValue: {
type: Object,
default: () => ({})
},
preload: {
type: String as PropType<'auto' | 'metadata' | 'none'>,
default: 'auto'
},
currentTime: {
type: Boolean,
default: true
},
playsinline: {
type: Boolean,
default: true
},
onPlay: {
type: Function,
default: () => {}
}
},
emits: ['exitfullscreen'],
data() {
return {
videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
player: null as any,
loading: true // 首次进入加载中
};
},
mounted() {
this._init();
},
methods: {
_init() {
// controls: [
// 'play-large' , // 中间的大播放按钮
// 'restart' , // 重新开始播放
// 'rewind' , // 按寻道时间倒带（默认 10 秒）
// 'play' , // 播放/暂停播放
// 'fast-forward' , // 快进查找时间（默认 10 秒）
// 'progress' , // 播放和缓冲的进度条和滑动条
// 'current-time' , // 播放的当前时间
// ' duration' , // 媒体的完整持续时间
// 'mute' , // 切换静音
// 'volume', // 音量控制
// 'captions' , // 切换字幕
// 'settings' , // 设置菜单
// 'pip' , // 画中画（当前仅 Safari）
// 'airplay' , // Airplay（当前仅 Safari）
// 'download ' , // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
// 'fullscreen' , // 切换全屏
// ] ;
const Button = TCPlayer.getComponent('Button');
const BigPlayButton = TCPlayer.getComponent('BigPlayButton');
BigPlayButton.prototype.createEl = function () {
const el = Button.prototype.createEl.call(this);
const _html =
'';
el.appendChild(
TCPlayer.dom.createEl('div', {
className: 'vjs-button-icon',
innerHTML: _html
})
);
return el;
};
this.player = TCPlayer(this.videoID, {
appID: '',
controls: this.controls
}); // player-container-id 为播放器容器 ID，必须与 html 中一致
if (this.player) {
this.player.src(this.src); // url 播放地址
this.player.poster(this.poster || '');
if (this.preload === 'none') {
this.loading = false;
}
this.player.on('loadstart', () => {
this.loading = false;
this.domPlayVisibility(false);
});
this.player.on('play', () => {
this.onPlay && this.onPlay(this.player);
});
this.player.on('fullscreenchange', () => {
if (this.player.isFullscreen()) {
console.log('fullscreen');
const i = document.createElement('i');
i.id = 'fullscreen-back';
i.className = 'van-icon van-icon-arrow-left video-back';
i.addEventListener('click', () => {
this.player.exitFullscreen();
});
// console.log(document.getElementsByClassName('video-js'))
document.getElementsByClassName('video-js')[0].appendChild(i);
} else {
console.log('exitfullscreen');
const i = document.getElementById('fullscreen-back');
i && i.remove();
}
});
}
},
// 操作功能
domPlayVisibility(hide = true) {
const controls = document.querySelector('.vjs-big-play-button');
const controls2 = document.querySelector('.vjs-control-bar');
if (hide) {
controls?.setAttribute('style', 'display:none');
controls2?.setAttribute('style', 'display:none');
} else {
controls?.removeAttribute('style');
setTimeout(() => {
controls2?.removeAttribute('style');
}, 200);
}
},
onReplay() {
this.player.currentTime(0);
this.player.play();
this.domPlayVisibility(false);
},
onStop() {
this.player.currentTime(0);
this.player.pause();
}
},
unmounted() {
this.player?.pause();
this.player?.src('');
this.player?.dispose();
},
render() {
return (
{/*
*/}
{/* 加载视频使用 */}
{/* {this.loading && (
加载中...
)} */}
);
}
});