vue中嵌入MP4 只有聲音沒圖像

最近一個項目需要在頁面嵌入一段視頻，當然首選iframe了，直接嵌入了youku的視頻，沒問題，我想ok了。於是將url替換為本地的MP4發現只有聲音沒有任何圖片，奇怪了，我首先想到是不是vue項目使用這iframe嵌入MP4不行；於是我有使用了vue-video和 vue-video-player來替換iframe 可是最后依然如此。懷疑是MP4格式問題，於是去查相關的資料，發現【HTML5中並沒有指定視頻解碼器，它留給了瀏覽器來決定。】 這個真需要自己進行視頻解碼！

其實使用如下插件進行視頻嵌入也很不錯
github vue-video-player地址
github vue-video地址

看這個是測試無圖視頻
這個是使用的在線地址
於是我去下了個迅捷轉碼工具

也可雲盤下載 https://pan.baidu.com/s/19nfangdcTJ22b8Nu2SR-dA 提取碼 2jsf


非會員轉碼的確有點慢，而且只能轉2分鍾還帶水印，管他只要能用就好哈

哈哈

到此總算解決了這個只有聲音沒有圖像的問題

注意：這里要使用video 來嵌入，使用iframe嵌入會自動播放視頻；

   <div class="video-wrap">
       <div>
           <!--<iframe :src="localVedio.youtobeURL" frameborder='0'-->
                   <!--allowfullscreen style='width:100%;height:130px;'>-->
           <!--</iframe>-->
           <video width="100%" height="130" controls>
               <source :src="localVedio.youtobeURL" type="video/mp4">
           </video>
       </div>
       <div>
           <video width="100%" height="130" controls>
               <source :src="activeVideo.youtobeURL" type="video/mp4">
           </video>
           <!--<iframe :src="activeVideo.youtobeURL" frameborder='0'-->
                    <!--allowfullscreen style='width:100%;height:130px;'>-->
           <!--</iframe>-->
       </div>
   </div>
   
	<script type="text/ecmascript-6"> export default { name: "third_d_video", data(){ return{ localVedio:{ id:2,title:'test1',thumbnail:'../../../assets/img/map/world.png',speaker:'harry', likes:0,views:0,describe:'good', youtobeURL:'static/vedio/duxinshentan.mp4' }, activeVideo:{ id:3,title:'test1',thumbnail:'../../../assets/img/map/world.png',speaker:'harry', likes:0,views:0,describe:'good', // youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA' allow='autoplay;encrypted-media' youtobeURL:'static/video/duxinshentan.mp4' } } }, } </script>