|
|
@@ -7,15 +7,29 @@
|
|
|
:muted="options.muted"
|
|
|
:autoplay="options.autoplay"
|
|
|
:loop="options.loop"
|
|
|
- :controls="options.controls"
|
|
|
:poster="options.poster"
|
|
|
+ :controls="options.controls"
|
|
|
@error="handleError"
|
|
|
>
|
|
|
<source v-for="source in sources" :src="source.src" :type="source.type" :key="source.src" />
|
|
|
</video>
|
|
|
<div class="playing-mask" @click="play"></div>
|
|
|
- <div class="nut-video-play-btn" v-show="!state.playing" @click="play"></div>
|
|
|
- <div class="nut-video-controller"></div>
|
|
|
+ <div class="nut-video-play-btn" ref="palyBtn" v-show="!state.playing" @click="play"></div>
|
|
|
+ <!-- <div class="nut-video-controller" v-show="showToolbox">
|
|
|
+ <div class="current-time">{{ videoSet.displayTime }}</div>
|
|
|
+ <div class="progress-container">
|
|
|
+ <div class="progress" ref="progressBar">
|
|
|
+ <div class="buffered" style="width:50%"></div>
|
|
|
+ <div class="video-ball">
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div class="played" ref="playedBar"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="duration-time">{{ videoSet.totalTime }}</div>
|
|
|
+ <div class="volume"></div>
|
|
|
+ <div class="fullscreen-icon" @click="fullScreen"></div>
|
|
|
+ </div> -->
|
|
|
<!-- 错误弹窗 -->
|
|
|
<div class="nut-video-error" v-show="state.isError">
|
|
|
<p class="lose">视频加载失败</p>
|
|
|
@@ -24,6 +38,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import {throttle} from '../../utils/throttle';
|
|
|
export default {
|
|
|
name: 'nut-video',
|
|
|
props: {
|
|
|
@@ -32,7 +47,6 @@ export default {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
-
|
|
|
sources: Array,
|
|
|
options: {
|
|
|
type: Object,
|
|
|
@@ -45,8 +59,7 @@ export default {
|
|
|
controls: true,
|
|
|
muted: false, //是否静音
|
|
|
disabled: false, //禁止操作
|
|
|
- playsinline: false, //行内展示
|
|
|
-
|
|
|
+ playsinline: false //行内展示
|
|
|
};
|
|
|
},
|
|
|
required: true
|
|
|
@@ -54,13 +67,31 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- video: null,
|
|
|
+ videoElm: null,
|
|
|
initial: true, //控制封面的显示
|
|
|
showToolbox: false, //控制控制器和标题的显示
|
|
|
- progress: 0, //进度
|
|
|
- duration: 0, //总时长
|
|
|
+ // 视频容器元素
|
|
|
+ player: {
|
|
|
+ $player: null,
|
|
|
+ pos: null
|
|
|
+ },
|
|
|
+ // progress进度条元素
|
|
|
+ progressBar: {
|
|
|
+ progressElm: null, // 进度条DOM对象
|
|
|
+ pos: null
|
|
|
+ },
|
|
|
+ // video控制显示设置
|
|
|
+ videoSet: {
|
|
|
+ loaded: 0, // 缓存长度
|
|
|
+ displayTime: '00:00', // 进度时间
|
|
|
+ totalTime: '00:00', // 总时间
|
|
|
+ progress: {
|
|
|
+ width: 0, // 进度条长度
|
|
|
+ current: 0 // 进度条当前位置
|
|
|
+ }
|
|
|
+ },
|
|
|
state: {
|
|
|
- contrlShow: true,
|
|
|
+ contrlShow: false,
|
|
|
vol: 0.5, //音量
|
|
|
currentTime: 0, //当前时间
|
|
|
fullScreen: false,
|
|
|
@@ -76,67 +107,141 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
- this.video = this.$el.getElementsByTagName('video')[0]
|
|
|
+ this.videoElm = this.$el.getElementsByTagName('video')[0];
|
|
|
if (this.options.autoplay) {
|
|
|
this.play();
|
|
|
}
|
|
|
|
|
|
if (this.options.playsinline) {
|
|
|
- this.video.setAttribute('playsinline', this.options.playsinline);
|
|
|
- this.video.setAttribute('webkit-playsinline', this.options.playsinline);
|
|
|
- this.video.setAttribute('x5-playsinline', this.options.playsinline);
|
|
|
- this.video.setAttribute('x5-video-player-type', 'h5');
|
|
|
- this.video.setAttribute('x5-video-player-fullscreen', false);
|
|
|
+ this.videoElm.setAttribute('playsinline', this.options.playsinline);
|
|
|
+ this.videoElm.setAttribute('webkit-playsinline', this.options.playsinline);
|
|
|
+ this.videoElm.setAttribute('x5-playsinline', this.options.playsinline);
|
|
|
+ this.videoElm.setAttribute('x5-video-player-type', 'h5');
|
|
|
+ this.videoElm.setAttribute('x5-video-player-fullscreen', false);
|
|
|
}
|
|
|
this.volumeHandle();
|
|
|
-
|
|
|
- this.video.addEventListener('play', ()=>{
|
|
|
+
|
|
|
+ // const $player = this.$el;
|
|
|
+ // const $progress = this.$el.getElementsByClassName('progress')[0];
|
|
|
+ // // 播放器位置
|
|
|
+ // this.player.$player = $player;
|
|
|
+ // this.progressBar.$progress = $progress;
|
|
|
+ // this.player.pos = $player.getBoundingClientRect();
|
|
|
+ // this.progressBar.pos = $progress.getBoundingClientRect();
|
|
|
+ // this.videoSet.progress.width = Math.round($progress.getBoundingClientRect().width);
|
|
|
+
|
|
|
+ this.videoElm.addEventListener('play', () => {
|
|
|
this.state.playing = true;
|
|
|
});
|
|
|
- this.video.addEventListener('pause', ()=>{
|
|
|
+ this.videoElm.addEventListener('pause', () => {
|
|
|
this.state.playing = false;
|
|
|
});
|
|
|
},
|
|
|
play() {
|
|
|
this.state.playing = !this.state.playing;
|
|
|
-
|
|
|
+
|
|
|
if (this.options.autoplay && this.options.disabled) {
|
|
|
this.state.playing = true;
|
|
|
return false;
|
|
|
}
|
|
|
- if (this.video) {
|
|
|
+ if (this.videoElm) {
|
|
|
+ // if (this.state.playing) {
|
|
|
+ // this.videoElm.play();
|
|
|
+ // this.videoElm.addEventListener('ended', this.playEnded);
|
|
|
+ // this.$emit('play', this.video);
|
|
|
+ // } else {
|
|
|
+ // this.videoElm.pause();
|
|
|
+ // this.$emit('pause', this.video);
|
|
|
+ // }
|
|
|
+ // 播放状态
|
|
|
if (this.state.playing) {
|
|
|
- this.video.play();
|
|
|
- this.video.addEventListener('ended', this.playEnded);
|
|
|
- this.$emit('play', this.video)
|
|
|
-
|
|
|
- } else {
|
|
|
- this.video.pause();
|
|
|
- this.$emit('pause', this.video)
|
|
|
+ try {
|
|
|
+ this.videoElm.play();
|
|
|
+ // this.isPauseTouch = false;
|
|
|
+ // 监听缓存进度
|
|
|
+ // this.videoElm.addEventListener('progress', e => {
|
|
|
+ // this.getLoadTime();
|
|
|
+ // });
|
|
|
+ // // 监听播放进度
|
|
|
+ // this.videoElm.addEventListener('timeupdate', throttle(this.getPlayTime, 100, 1));
|
|
|
+ // 监听结束
|
|
|
+ this.videoElm.addEventListener('ended', this.playEnded);
|
|
|
+ this.$emit('play', this.videoElm);
|
|
|
+ } catch (e) {
|
|
|
+ // 捕获url异常出现的错误
|
|
|
+ this.handleError()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 停止状态
|
|
|
+ else {
|
|
|
+ this.isPauseTouch = true;
|
|
|
+ this.videoElm.pause();
|
|
|
+ this.$emit('pause', this.videoElm);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- volumeHandle(){
|
|
|
- this.state.vol = this.video.volume
|
|
|
+ volumeHandle() {
|
|
|
+ this.state.vol = this.videoElm.volume;
|
|
|
},
|
|
|
- playEnded(){
|
|
|
- this.state.playing = false;
|
|
|
- this.video.currentTime = 0;
|
|
|
+ playEnded() {
|
|
|
// console.log('ended')
|
|
|
- this.$emit('playend', this.video)
|
|
|
+ this.state.playing = false;
|
|
|
+ this.state.isEnd = true;
|
|
|
+ this.state.controlBtnShow = true;
|
|
|
+ this.videoSet.displayTime = '00:00';
|
|
|
+ this.videoSet.progress.current = 0;
|
|
|
+ this.videoElm.currentTime = 0;
|
|
|
+ this.$emit('playend', this.videoElm);
|
|
|
},
|
|
|
// 数据加载出错
|
|
|
handleError() {
|
|
|
// console.log('error')
|
|
|
this.state.isError = true;
|
|
|
},
|
|
|
+
|
|
|
+ fullScreen() {
|
|
|
+ if (!this.state.fullScreen) {
|
|
|
+ this.state.fullScreen = true;
|
|
|
+ this.video.webkitRequestFullScreen();
|
|
|
+ } else {
|
|
|
+ this.state.fullScreen = false;
|
|
|
+ document.webkitCancelFullScreen();
|
|
|
+ }
|
|
|
+ setTimeout(this.initVideo, 200);
|
|
|
+ },
|
|
|
+ // 获取播放时间
|
|
|
+ getPlayTime() {
|
|
|
+ console.log(222);
|
|
|
+ const percent = this.videoElm.currentTime / this.videoElm.duration;
|
|
|
+ this.videoSet.progress.current = Math.round(this.videoSet.progress.width * percent);
|
|
|
+ // 赋值时长
|
|
|
+ this.videoSet.totalTime = timeParse(this.videoElm.duration);
|
|
|
+ this.videoSet.displayTime = timeParse(this.videoElm.currentTime);
|
|
|
+ },
|
|
|
+ // 获取缓存时间
|
|
|
+ getLoadTime() {
|
|
|
+ // console.log('缓存了...',this.videoElm.buffered.end(0));
|
|
|
+ this.videoSet.loaded = (this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
|
|
|
+ },
|
|
|
+ getTime() {
|
|
|
+ this.videoElm.addEventListener('durationchange', e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ this.videoElm.addEventListener('progress', e => {
|
|
|
+ this.videoSet.loaded = (-1 + this.videoElm.buffered.end(0) / this.videoElm.duration) * 100;
|
|
|
+ });
|
|
|
+ this.videoSet.len = this.videoElm.duration;
|
|
|
+ },
|
|
|
+ sliderStart() {},
|
|
|
+ touchmove() {},
|
|
|
+ touchend() {},
|
|
|
// 点击重新加载
|
|
|
retry() {
|
|
|
+ console.log('error')
|
|
|
this.state.isError = false;
|
|
|
this.init();
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
- beforeDestroy() {
|
|
|
- }
|
|
|
+ beforeDestroy() {}
|
|
|
};
|
|
|
</script>
|
richard1015