偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

從0到1搭建一款Vue可配置視頻播放器組件

作者：maomin9761
開發(fā) 前端
這篇文章主要講述如何從0到1搭建一款適用于Vue.js的自定義配置視頻播放器。我們平時在PC端網(wǎng)站上觀看視頻時，會看到有很多豐富樣式的視頻播放器，而我們自己寫的video標(biāo)簽樣式卻是那么丑。其實(shí)像那些網(wǎng)站都是基于原生video標(biāo)簽進(jìn)行開發(fā)的，只不過還得適當(dāng)加工一下，才會有我們所看到的漂亮的視頻播放器。

[[360660]]

 前言

話不多說，這篇文章主要講述如何從0到1搭建一款適用于Vue.js的自定義配置視頻播放器。我們平時在PC端網(wǎng)站上觀看視頻時，會看到有很多豐富樣式的視頻播放器，而我們自己寫的video標(biāo)簽樣式卻是那么丑。其實(shí)像那些網(wǎng)站都是基于原生video標(biāo)簽進(jìn)行開發(fā)的，只不過還得適當(dāng)加工一下，才會有我們所看到的漂亮的視頻播放器。

開發(fā)

在具體開發(fā)之前，我們需要明確我們需要做什么?

  1. 封裝一個可配置的視頻播放器;
  2. 適用于Vue.js;
  3. 應(yīng)用于PC端網(wǎng)站;
  4. 視頻播放器常用的功能必須要有;
  5. 發(fā)布到Npm;

好，明確了以上幾點(diǎn)之后，我們就開始敲代碼了。

一、搭建一個基礎(chǔ)的UI組件

這里的UI組件你可以理解成我們搭建一個靜態(tài)頁面，就是把視頻播放器簡單地搭建起來，有一個基礎(chǔ)的模型。

  1. <template> 
  2.   <div 
  3.     class="video-box" 
  4.   > 
  5.     <video 
  6.       class="video-player" 
  7.     ></video> 
  8.     <div class="bottom-tool"> 
  9.       <div class="pv-bar"> 
  10.         <div class="pv-played"></div> 
  11.         <div class="pv-dot"></div> 
  12.       </div> 
  13.       <div class="pv-controls"> 
  14.         <div class="pc-con-l"> 
  15.           <div class="play-btn"> 
  16.             <i class="iconfont icon-bofang"></i> 
  17.             <i class="iconfont icon-zanting hide"></i> 
  18.           </div> 
  19.           <div class="pv-time"> 
  20.             <span class="pv-currentTime">00:00:00</span> 
  21.             <span>/</span> 
  22.             <span class="pv-duration">00:00:00</span> 
  23.           </div> 
  24.         </div> 
  25.         <div class="pc-con-r"> 
  26.           <div class="pv-listen ml"> 
  27.             <div class="pv-yl"> 
  28.               <p class="pv-ol"></p> 
  29.               <p class="pv-bg"></p> 
  30.             </div> 
  31.             <div class="pv-iconyl"> 
  32.               <i class="iconfont icon-yinliang"></i> 
  33.               <i class="iconfont icon-jingyin hide"></i> 
  34.             </div> 
  35.           </div> 
  36.           <div class="pv-speed ml"> 
  37.             <p class="pv-spnum">1x</p> 
  38.             <ul class="selectList"> 
  39.               <li>0.5x</li> 
  40.               <li>1x</li> 
  41.               <li>1.25x</li> 
  42.               <li>1.5x</li> 
  43.               <li>2x</li> 
  44.             </ul> 
  45.           </div> 
  46.           <div class="pv-screen ml"> 
  47.             <i class="iconfont icon-quanping"></i> 
  48.             <i class="iconfont icon-huanyuan hide"></i> 
  49.           </div> 
  50.           <div class="pv-screens ml"> 
  51.             <i class="iconfont icon-shipinquanping"></i> 
  52.             <i class="iconfont icon-tuichuquanping hide"></i> 
  53.           </div> 
  54.         </div> 
  55.       </div> 
  56.     </div> 
  57.   </div> 
  58. </template> 
  59.  
  60. <script> 
  61. export default { 
  62.   name: "VamVideo" 
  63. }; 
  64. </script> 
  65.  
  66. <style scoped> 
  67. @import "./css/iconfont/iconfont.css"; 
  68. @import "./css/index.css"; 
  69. </style> 

樣式文件我這里就不展示了，我會在文末給出源碼地址。


二、開發(fā)邏輯執(zhí)行文件

最最關(guān)鍵的部分莫過于邏輯文件了，我這里使用構(gòu)造函數(shù)的方式。

  1. // eslint-disable-next-line no-unused-vars 
  2. function VamVideo(vp, attrObj, styleObj) { 
  3.   // 初始化 
  4.   this.timer = null; 
  5.   this.disX = 0; 
  6.   this.disL = 0; 
  7.   this.isPageFullScreen = false; 
  8.   // 處理視頻屬性 
  9.   for (const key in attrObj) { 
  10.     if (Object.hasOwnProperty.call(attrObj, key) && key !== "controls") { 
  11.       $(".video-player").setAttribute(key, attrObj[key]); 
  12.     } 
  13.   } 
  14.   // 處理視頻樣式 
  15.   for (const key in styleObj) { 
  16.     if (Object.hasOwnProperty.call(styleObj, key)) { 
  17.       $(".video-box").style[`${key}`] = styleObj[key]; 
  18.       key === "width" 
  19.         ? (this.vbw = styleObj.width) 
  20.         : (this.vbw = vp.offsetWidth); 
  21.       key === "height" 
  22.         ? (this.vbh = styleObj.height) 
  23.         : (this.vbh = vp.offsetHeight); 
  24.     } 
  25.   } 
  26.   // 封裝獲取元素節(jié)點(diǎn) 
  27.   function $(el) { 
  28.     return document.querySelector(el); 
  29.   } 
  30.   // 處理當(dāng)前時間 
  31.   function nowTime() { 
  32.     $(".pv-currentTime").innerHTML = changeTime($(".video-player").currentTime); 
  33.     let scale = $(".video-player").currentTime / $(".video-player").duration; 
  34.     let w = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  35.     $(".pv-dot").style.left = scale * w + "px"; 
  36.     $(".pv-played").style.width = scale * w + "px"; 
  37.   } 
  38.   // 處理時分秒 
  39.   function changeTime(iNum) { 
  40.     let iN = parseInt(iNum); 
  41.     const iH = toZero(Math.floor(iN / 3600)); 
  42.     const iM = toZero(Math.floor((iN % 3600) / 60)); 
  43.     const iS = toZero(Math.floor(iN % 60)); 
  44.     return iH + ":" + iM + ":" + iS; 
  45.   } 
  46.   // 補(bǔ)0 
  47.   function toZero(num) { 
  48.     if (num <= 9) { 
  49.       return "0" + num; 
  50.     } else { 
  51.       return "" + num; 
  52.     } 
  53.   } 
  54.   // 元素顯示 
  55.   this.showEl = function (el) { 
  56.     $(el).style.display = "block"; 
  57.   }; 
  58.   // 元素隱藏 
  59.   this.hideEl = function (el) { 
  60.     $(el).style.display = "none"; 
  61.   }; 
  62.   // 動態(tài)設(shè)置視頻寬高 
  63.   this.setVp = function (w, h) { 
  64.     const _w = String(w).indexOf("px") != -1 ? w : w + "px"; 
  65.     const _h = String(h).indexOf("px") != -1 ? h : h + "px"; 
  66.     $(".video-player").style.width = _w; 
  67.     $(".video-player").style.height = _h; 
  68.     $(".video-box").style.width = _w; 
  69.     $(".video-box").style.height = _h; 
  70.     $(".pv-bar").style.width = _w; 
  71.   }; 
  72.   // 底部控制欄(顯示/隱藏) 
  73.   this.bottomTup = function () { 
  74.     $(".bottom-tool").style.bottom = "0px"; 
  75.   }; 
  76.   this.bottomTdow = function () { 
  77.     $(".bottom-tool").style.bottom = "-45px"; 
  78.   }; 
  79.   // 播放/暫停 
  80.   this.usePlay = function () { 
  81.     if ($(".video-player").paused) { 
  82.       $(".video-player").play(); 
  83.       this.hideEl(".icon-bofang"); 
  84.       this.showEl(".icon-zanting"); 
  85.       nowTime(); 
  86.       this.timer = setInterval(nowTime, 1000); 
  87.     } else { 
  88.       $(".video-player").pause(); 
  89.       this.showEl(".icon-bofang"); 
  90.       this.hideEl(".icon-zanting"); 
  91.       clearInterval(this.timer); 
  92.     } 
  93.   }; 
  94.   this.isplay = function () { 
  95.     this.usePlay(); 
  96.   }; 
  97.   // 總時長 
  98.   this.useOnplay = function () { 
  99.     $(".pv-duration").innerHTML = changeTime($(".video-player").duration); 
  100.   }; 
  101.   // 播放結(jié)束 
  102.   this.useEnd = function () { 
  103.     this.showEl(".icon-bofang"); 
  104.     this.hideEl(".icon-zanting"); 
  105.   }; 
  106.   // 靜音 
  107.   this.useVolume = function () { 
  108.     if ($(".video-player").muted) { 
  109.       $(".video-player").volume = 1; 
  110.       this.hideEl(".icon-jingyin"); 
  111.       this.showEl(".icon-yinliang"); 
  112.       $(".video-player").muted = false; 
  113.     } else { 
  114.       $(".video-player").volume = 0; 
  115.       this.showEl(".icon-jingyin"); 
  116.       this.hideEl(".icon-yinliang"); 
  117.       $(".video-player").muted = true; 
  118.     } 
  119.   }; 
  120.   // 頁面全屏 
  121.   this.pageFullScreen = function () { 
  122.     const w = document.documentElement.clientWidth || document.body.clientWidth; 
  123.     const h = 
  124.       document.documentElement.clientHeight || document.body.clientHeight; 
  125.     this.isPageFullScreen = !this.isPageFullScreen; 
  126.     if (this.isPageFullScreen) { 
  127.       this.setVp(w, h); 
  128.       this.hideEl(".icon-quanping"); 
  129.       this.showEl(".icon-huanyuan"); 
  130.       this.hideEl(".pv-screens"); 
  131.     } else { 
  132.       this.setVp(this.vbw, this.vbh); 
  133.       this.showEl(".icon-quanping"); 
  134.       this.hideEl(".icon-huanyuan"); 
  135.       this.showEl(".pv-screens"); 
  136.     } 
  137.   }; 
  138.   // 窗口全屏 
  139.   this.fullScreen = function () { 
  140.     const el = $(".video-box"); 
  141.     const isFullscreen = 
  142.       document.fullScreen || 
  143.       document.mozFullScreen || 
  144.       document.webkitIsFullScreen; 
  145.     if (!isFullscreen) { 
  146.       this.showEl(".icon-tuichuquanping"); 
  147.       this.hideEl(".icon-shipinquanping"); 
  148.       this.hideEl(".pv-screen"); 
  149.       (el.requestFullscreen && el.requestFullscreen()) || 
  150.         (el.mozRequestFullScreen && el.mozRequestFullScreen()) || 
  151.         (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || 
  152.         (el.msRequestFullscreen && el.msRequestFullscreen()); 
  153.     } else { 
  154.       this.showEl(".icon-shipinquanping"); 
  155.       this.hideEl(".icon-tuichuquanping"); 
  156.       this.showEl(".pv-screen"); 
  157.       document.exitFullscreen 
  158.         ? document.exitFullscreen() 
  159.         : document.mozCancelFullScreen 
  160.         ? document.mozCancelFullScreen() 
  161.         : document.webkitExitFullscreen 
  162.         ? document.webkitExitFullscreen() 
  163.         : ""; 
  164.     } 
  165.   }; 
  166.   // 播放進(jìn)度條 
  167.   this.useTime = function (ev) { 
  168.     let ev1 = ev || window.event; 
  169.     this.disX = ev1.clientX - $(".pv-dot").offsetLeft; 
  170.     document.onmousemove = (ev) => { 
  171.       let ev2 = ev || window.event; 
  172.       let L = ev2.clientX - this.disX; 
  173.       if (L < 0) { 
  174.         L = 0; 
  175.       } else if (L > $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth) { 
  176.         L = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth; 
  177.       } 
  178.       $(".pv-dot").style.left = L + "px"; 
  179.       let scale = L / ($(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth); 
  180.       $(".video-player").currentTime = scale * $(".video-player").duration; 
  181.       nowTime(); 
  182.     }; 
  183.     document.onmouseup = function () { 
  184.       document.onmousemove = null; 
  185.     }; 
  186.     return false; 
  187.   }; 
  188.   // 音量控制 
  189.   this.useListen = function (ev) { 
  190.     let ev1 = ev || window.event; 
  191.     this.disL = ev1.clientX - $(".pv-ol").offsetLeft; 
  192.     document.onmousemove = (ev) => { 
  193.       let ev2 = ev || window.event; 
  194.       let L = ev2.clientX - this.disL; 
  195.       if (L < 0) { 
  196.         L = 0; 
  197.       } else if (L > $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth) { 
  198.         L = $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth; 
  199.       } 
  200.       $(".pv-ol").style.left = L + "px"; 
  201.       let scale = L / ($(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth); 
  202.       $(".pv-bg").style.width = $(".pv-ol").offsetLeft + "px"; 
  203.       if ($(".pv-ol").offsetLeft !== 0) { 
  204.         this.showEl(".icon-yinliang"); 
  205.         this.hideEl(".icon-jingyin"); 
  206.       } else { 
  207.         this.showEl(".icon-jingyin"); 
  208.         this.hideEl(".icon-yinliang"); 
  209.       } 
  210.       $(".video-player").volume = scale; 
  211.     }; 
  212.     document.onmouseup = function () { 
  213.       document.onmousemove = null; 
  214.     }; 
  215.     return false; 
  216.   }; 
  217.   // 播放速度 
  218.   this.useSpnum = function (e) { 
  219.     let ev = e || window.event; 
  220.     $(".pv-spnum").innerText = ev.target.innerText; 
  221.     const value = ev.target.innerText.replace("x", ""); 
  222.     $(".video-player").playbackRate = value; 
  223.   }; 
  224. } 
  225. // 導(dǎo)出 
  226. export default VamVideo; 

三、整合組件邏輯

開發(fā)完UI組件以及邏輯組件了，那我們接下來就是將兩者結(jié)合起來。

  1. <template> 
  2.   <div 
  3.     class="video-box" 
  4.     @mouseenter="vp.bottomTup()" 
  5.     @mouseleave="vp.bottomTdow()" 
  6.   > 
  7.     <video 
  8.       class="video-player" 
  9.       @canplay="vp.useOnplay()" 
  10.       @ended="vp.useEnd()" 
  11.       @click="vp.isplay()" 
  12.     ></video> 
  13.     <div class="bottom-tool"> 
  14.       <div class="pv-bar"> 
  15.         <div class="pv-played"></div> 
  16.         <div class="pv-dot" @mousedown="vp.useTime()"></div> 
  17.       </div> 
  18.       <div class="pv-controls"> 
  19.         <div class="pc-con-l"> 
  20.           <div class="play-btn" @click="vp.usePlay()"> 
  21.             <i class="iconfont icon-bofang"></i> 
  22.             <i class="iconfont icon-zanting hide"></i> 
  23.           </div> 
  24.           <div class="pv-time"> 
  25.             <span class="pv-currentTime">00:00:00</span> 
  26.             <span>/</span> 
  27.             <span class="pv-duration">00:00:00</span> 
  28.           </div> 
  29.         </div> 
  30.         <div class="pc-con-r"> 
  31.           <div class="pv-listen ml"> 
  32.             <div class="pv-yl"> 
  33.               <p class="pv-ol" @mousedown="vp.useListen()"></p> 
  34.               <p class="pv-bg"></p> 
  35.             </div> 
  36.             <div class="pv-iconyl" @click="vp.useVolume()"> 
  37.               <i class="iconfont icon-yinliang"></i> 
  38.               <i class="iconfont icon-jingyin hide"></i> 
  39.             </div> 
  40.           </div> 
  41.           <div class="pv-speed ml"> 
  42.             <p class="pv-spnum">1x</p> 
  43.             <ul class="selectList" @click="vp.useSpnum()"> 
  44.               <li>0.5x</li> 
  45.               <li>1x</li> 
  46.               <li>1.25x</li> 
  47.               <li>1.5x</li> 
  48.               <li>2x</li> 
  49.             </ul> 
  50.           </div> 
  51.           <div class="pv-screen ml" @click="vp.pageFullScreen()"> 
  52.             <i class="iconfont icon-quanping"></i> 
  53.             <i class="iconfont icon-huanyuan hide"></i> 
  54.           </div> 
  55.           <div class="pv-screens ml" @click="vp.fullScreen()"> 
  56.             <i class="iconfont icon-shipinquanping"></i> 
  57.             <i class="iconfont icon-tuichuquanping hide"></i> 
  58.           </div> 
  59.         </div> 
  60.       </div> 
  61.     </div> 
  62.   </div> 
  63. </template> 
  64.  
  65. <script> 
  66. import VamVideo from "./vp.js"; 
  67. export default { 
  68.   name: "VamVideo", 
  69.   data: () => ({ 
  70.     vp: null, 
  71.     defaultStyle: { 
  72.       width: "1200px", 
  73.       height: "600px", 
  74.     }, 
  75.   }), 
  76.   props: { 
  77.     properties: { 
  78.       type: Object, 
  79.     }, 
  80.     videoStyle: { 
  81.       type: Object, 
  82.     }, 
  83.   }, 
  84.   mounted() { 
  85.     this.vp = new VamVideo( 
  86.       document.querySelector(".video-box"), 
  87.       this.properties, 
  88.       Object.keys(this.videoStyle).length === 0 
  89.         ? this.defaultStyle 
  90.         : this.videoStyle 
  91.     ); 
  92.   }, 
  93. }; 
  94. </script> 
  95.  
  96. <style scoped> 
  97. @import "./css/iconfont/iconfont.css"; 
  98. @import "./css/index.css"; 
  99. </style> 

首先我們引入了之前開發(fā)完成的邏輯文件vp.js，然后在mounted方法中對類VamVideo進(jìn)行實(shí)例化，賦給this.vp。傳給類的幾個參數(shù)分別是最外層節(jié)點(diǎn)、視頻屬性、視屏樣式。props屬性中的properties為視頻屬性，videoStyle為視頻樣式。

四、發(fā)布組件

完成了以上幾個步驟的開發(fā)，我們需要將我們完成的組件發(fā)布到Npm上。

1. 初始化

創(chuàng)建一個空文件夾，我們可以取名叫v-vamvideo。在此文件夾下鍵入命令：

  1. npm init -y 

因?yàn)槲覀冞€需要修改，所以直接創(chuàng)建package.json文件。

  1. { 
  2.   "name": "vue-vam-video", 
  3.   "version": "1.0.0", 
  4.   "description": "Vue.js Custom video components", 
  5.   "main": "index.js", 
  6.   "author": "maomincoding", 
  7.   "keywords": ["video"], 
  8.   "license": "ISC", 
  9.   "private": false 
  10. } 
  • name：組件名
  • author：Npm用戶名
  • main：入口文件
  • version：版本號，更新組件需要用到這個字段
  • description：描述
  • license的值按照以上即可
  • keywords為：搜索的關(guān)鍵詞
  • private設(shè)為false, 開源因此需要將這個字段改為false

2. 引入組件

將我們之前封裝好的組件復(fù)制到v-vamvide這個文件夾中，下圖就是我們之前封裝好的組件文件目錄。


3. 創(chuàng)建入口文件

我們要發(fā)布到Npm上需要一個入口文件，我們在v-vamvide根目錄下創(chuàng)建一個入口文件，我們這里叫做index.js。

  1. // 引入組件 
  2. import VamVideo from "./VamVideo/vamvideo.vue"; 
  3. // 組件需要添加name屬性，代表注冊的組件名稱 
  4. VamVideo.install = (Vue) => Vue.component(VamVideo.name, VamVideo); //注冊組件 
  5.  
  6. export default VamVideo; 

4. 創(chuàng)建一個說明文檔

發(fā)布到Npm上，用戶需要知道這個組件干什么的?怎么用?我們在v-vamvide根目錄下創(chuàng)建一個說明文檔，取名為README.md

  1. # vue-vamvideo 
  2. > Vue.js Custom video components 
  3.  
  4. ## Using documents 
  5. 1. Introducing components 
  6. 2. configuration parameter 
  7.  
  8. - `properties`: Video properties. 
  9.  
  10. - `videoStyle`: Video style. 
  11.  
  12. These two parameters need to be set separately. 
  13. *** 
  14. <template> 
  15.   <div id="app"> 
  16.     <vam-video :properties="videoOption.properties" :videoStyle="videoOption.videoStyle"></vam-video> 
  17.   </div> 
  18. </template> 
  19.  
  20. <script> 
  21. export default { 
  22.   name: "Index", 
  23.   data: () => ({ 
  24.     videoOption: { 
  25.       properties: { 
  26.         poster: require("./img/bg.png"), 
  27.         src: 
  28.           "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
  29.         preload: "auto", 
  30.         loop: "loop", 
  31.         // autoplay:"autoplay", 
  32.         // muted:true, 
  33.         // controls:"controls" 
  34.       }, 
  35.       videoStyle: { 
  36.         // width: "1200px", 
  37.         // height: "600px", 
  38.       }, 
  39.     }, 
  40.   }) 
  41. }; 
  42. </script> 
  43. *** 

 我們離成功很近了，所以謝謝你可以閱讀到這。源碼地址：https://github.com/maomincoding/vue-vam-video

5. 發(fā)布

開始操作以下步驟之前，你需要把命令行切換到項目根目錄下(也就是這里的v-vamvide這個文件夾)。

1.查看登錄源是否是http://registry.npmjs.org

  1. npm config get registry 

如果不是，切換登錄源。

  1. npm config set registry=http://registry.npmjs.org 

2.登錄Npm

  1. npm login 

相繼輸入用戶名、密碼、郵箱。回車出現(xiàn)Logged in as maomincoding on http://registry.npmjs.org，那么就登錄成功了。

3.上傳發(fā)布到Npm

  1. npm publish 

 

五、安裝組件

既然我們已經(jīng)發(fā)布到Npm上，我們可以去Npm網(wǎng)站上看下效果。

https://www.npmjs.com/package/vue-vam-video


發(fā)布組件成功了，那么我們放在Vue工程上測試一下。

1.安裝組件

  1. npm i vue-vam-video 

2.注冊組件

全局注冊

  1. import Vue from 'vue' 
  2. import App from './App.vue' 
  3. // 全局注冊 
  4. import VamVideo from "vue-vam-video"; 
  5. Vue.use(VamVideo); 
  6.  
  7. Vue.config.productionTip = false 
  8.  
  9. new Vue({ 
  10.   render: h => h(App), 
  11. }).$mount('#app') 

  1. <template> 
  2.   <div id="app"> 
  3.     <vam-video :properties="videoOption.properties" :videoStyle="videoOption.videoStyle"></vam-video> 
  4.   </div> 
  5. </template> 
  6.  
  7. <script> 
  8. export default { 
  9.   name: "App", 
  10.   data: () => ({ 
  11.     videoOption: { 
  12.       properties: { 
  13.         poster: require("./assets/logo.png"), 
  14.         src: 
  15.           "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
  16.         preload: "auto", 
  17.         loop: "loop", 
  18.         // autoplay:"autoplay", 
  19.         // muted:true, 
  20.         // controls:"controls" 
  21.       }, 
  22.       videoStyle: { 
  23.         // width: "1200px", 
  24.         // height: "600px", 
  25.       }, 
  26.     }, 
  27.   }) 
  28. }; 
  29. </script> 

局部注冊

  1. <template> 
  2.   <div id="app"> 
  3.     <vam-video :properties="videoOption.properties" :videoStyle="videoOption.videoStyle"></vam-video> 
  4.   </div> 
  5. </template> 
  6.  
  7. <script> 
  8. import VamVideo from 'vue-vam-video' 
  9. export default { 
  10.   name: "App", 
  11.   data: () => ({ 
  12.     videoOption: { 
  13.       properties: { 
  14.         poster: require("./assets/logo.png"), 
  15.         src: 
  16.           "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
  17.         preload: "auto", 
  18.         loop: "loop", 
  19.         // autoplay:"autoplay", 
  20.         // muted:true, 
  21.         // controls:"controls" 
  22.       }, 
  23.       videoStyle: { 
  24.         // width: "1200px", 
  25.         // height: "600px", 
  26.       }, 
  27.     }, 
  28.   }), 
  29.   components: { 
  30.     VamVideo 
  31.   }, 
  32. }; 
  33. </script> 

3.效果 大功告成!


 

責(zé)任編輯：姜華 來源： 前端歷劫之路
視頻播放器Vuevideo
相關(guān)推薦

2021-02-20 07:02:24

Vue.js組件開發(fā)技術(shù)

2021-01-27 07:24:38

TypeScript工具Java

2022-01-27 13:02:46

前端爬蟲工具

2021-09-26 05:00:11

Vscode插件

2011-08-30 09:48:07

Ubuntu

2021-03-30 07:11:22

Vue3parcel-vue-工具

2021-01-25 05:38:59

JSWebvue-vam-vid

2023-10-30 13:14:57

Moosync開源播放器

2020-12-21 05:58:09

JavaScript視頻播放器開發(fā)

2023-11-15 08:14:35

2011-12-18 18:27:32

Flash

2023-03-29 08:52:58

視覺Vue組件庫

2022-08-16 17:37:06

視頻播放器鴻蒙

2021-08-01 16:13:52

Clapper視頻播放器Linux

2023-03-06 11:35:55

經(jīng)營分析體系

2012-06-04 13:44:08

2021-10-19 14:27:07

鴻蒙HarmonyOS應(yīng)用

2022-03-15 11:51:00

決策分析模型

2021-04-12 08:31:53

PC-Dooring項目PC端搭建

2011-07-20 16:21:20

iPhone 視頻 播放器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號