zyronon
4 years ago
6 changed files with 152 additions and 22 deletions
@ -0,0 +1,88 @@ |
|||||||
|
<template> |
||||||
|
<div id="TestVideo"> |
||||||
|
<video :src="url" ref="video" controls autoplay muted></video> |
||||||
|
<Loading v-if="loading"/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "TestVideo", |
||||||
|
components: {}, |
||||||
|
props: { |
||||||
|
modelValue: false |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
url: 'http://ttentau.top/13.mp4?v=' + Date.now() |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
watch: {}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
let video = this.$refs.video |
||||||
|
// video.addEventListener('progress', () => { |
||||||
|
// console.log('加载中') |
||||||
|
// }) |
||||||
|
// console.log(video) |
||||||
|
|
||||||
|
let eventTester = (e, t) => { |
||||||
|
video.addEventListener(e, () => { |
||||||
|
if (e === 'playing') this.loading = false |
||||||
|
if (e === 'progress') this.loading = true |
||||||
|
if (e === 'waiting') this.loading = true |
||||||
|
console.log((new Date()).getTime(), e, t) |
||||||
|
}, false); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||||
|
eventTester("abort", '客户端主动终止下载（不是因为错误引起）'); //客户端主动终止下载（不是因为错误引起） |
||||||
|
eventTester("loadstart", '客户端开始请求数据'); //客户端开始请求数据 |
||||||
|
// eventTester("progress", '客户端正在请求数据'); //客户端正在请求数据 |
||||||
|
// eventTester("suspend", '延迟下载'); //延迟下载 |
||||||
|
eventTester("abort", '客户端主动终止下载（不是因为错误引起），'); //客户端主动终止下载（不是因为错误引起）， |
||||||
|
eventTester("error", '请求数据时遇到错误'); //请求数据时遇到错误 |
||||||
|
eventTester("stalled", '网速失速'); //网速失速 |
||||||
|
eventTester("play", 'play()和autoplay开始播放时触发'); //play()和autoplay开始播放时触发 |
||||||
|
eventTester("pause", 'pause()触发'); //pause()触发 |
||||||
|
eventTester("loadedmetadata", '成功获取资源长度'); //成功获取资源长度 |
||||||
|
eventTester("loadeddata"); // |
||||||
|
eventTester("waiting", '等待数据，并非错误'); //等待数据，并非错误 |
||||||
|
eventTester("playing", '开始回放'); //开始回放 |
||||||
|
eventTester("canplay", '/可以播放，但中途可能因为加载而暂停'); //可以播放，但中途可能因为加载而暂停 |
||||||
|
eventTester("canplaythrough", '可以播放，歌曲全部加载完毕'); //可以播放，歌曲全部加载完毕 |
||||||
|
eventTester("seeking", '寻找中'); //寻找中 |
||||||
|
eventTester("seeked", '寻找完毕'); //寻找完毕 |
||||||
|
// eventTester("timeupdate",'播放时间改变'); //播放时间改变 |
||||||
|
eventTester("ended", '播放结束'); //播放结束 |
||||||
|
eventTester("ratechange", '播放速率改变'); //播放速率改变 |
||||||
|
eventTester("durationchange", '资源长度改变'); //资源长度改变 |
||||||
|
eventTester("volumechange", '音量改变'); //音量改变 |
||||||
|
|
||||||
|
}, |
||||||
|
methods: {} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="less"> |
||||||
|
@import "@/assets/less/index"; |
||||||
|
|
||||||
|
#TestVideo { |
||||||
|
position: fixed; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
top: 0; |
||||||
|
overflow: auto; |
||||||
|
color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
|
||||||
|
video { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue