HTML5视频播放器动态改变url链接以及无法播放MP4的坑
程序员文章站
2022-07-13 12:08:21
...
1.这几天研究视频播放器的相关内容。刚开始参考官网实现html5 中video标签实现MP4播放,确实实现了,不错很高兴。下面是相关代码及效果:
<video class="video" controls = "true"
poster="https://photo.mac69.com/180205/18020526/a9yPQozt0g.jpg" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5"
x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill">
<source src="../../assets/video/yz.mp4" type="video/mp4">
</video>
这里有个问题?source中 src写死了,能应用到项目中吗?显然是不可以的。怎么办呢?vue中的数据绑定中,可以通过:src=“videoUrl” 方式绑定数据。然后,通过 this.videoUrl = '@/assets/video/yz.mp4’方式链接传给src。对的,肯定是可以的,我满怀着信心操作一波。结果视频出不来,懵逼了。。。。
我试着查看改变前后对应的source标签的相关属性,显示到p标签位置。
<source id="source" :src="videoUrl" type="video/mp4">
<button class="button" @click="myFunction()">尝试一下</button>
<p id="demo"></p>
myFunction(){
var x = document.getElementById("source").src;
document.getElementById("demo").innerHTML = x;
}
结果看到了不同,改变前是:http://localhost:8080/static/media/yz.a24a191.mp4,改变后成 http://localhost:8080/static/media/yz.mp4。看来在source标签中还是对src做了某些操作的,暂时不太清楚。
2.经过网上查找找到了解决方案。this.videoUrl = require(’@/assets/video/yz.mp4’)。通过这样赋值, 竟然可以了,
猜想source标签中是不是这么操作的。下面是相关代码和实现效果图:
<template>
<div>
<p class="title">点击按钮播放或暂停视频。</p>
<video id="myVideo" class="video" controls = "true"
poster="@/assets/video/sea.jpg" preload="auto" webkit-playsinline="true" playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5"
x5-video-player-fullscreen="true" x5-video-orientation="portraint" style="object-fit:fill">
<source id="source" :src="videoUrl" type="video/mp4">
</video>
<button class="button" @click="playVid()" type="button">播放视频</button>
<button class="button" @click="pauseVid()" type="button">暂停视频</button>
<button class="button" @click="myFunction()">尝试一下</button>
<p id="demo"></p>
</div>
</template>
<script>
export default {
props: [ ],
data () {
return {
video: null,
videoUrl: ''
}
},
mounted () {
this.init()
},
methods: {
init(){
this.video = document.getElementById("myVideo")
this.videoUrl = require('@/assets/video/yz.mp4')
},
playVid(){
this.video.play();
} ,
pauseVid(){
this.video.pause();
},
myFunction(){
var x = document.getElementById("source").src;
document.getElementById("demo").innerHTML = x;
}
}
}
</script>
<style scoped lang="stylus">
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 9px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.title {
background-color: #e6a23c;
line-height: 4;
text-align: center;
border-radius: 3%;
font-size: 18px;
font-style: normal;
}
</style>