欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

HTML5视频播放器动态改变url链接以及无法播放MP4的坑
这里有个问题?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>

HTML5视频播放器动态改变url链接以及无法播放MP4的坑