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

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>