前言

今日正式發布一款基于Vue.js的Web視頻播放器插件。可配置，操作靈活。跟我一起來體驗吧!

線上地址體驗

基于vue3.0和vue-vam-video，我開發了一款在線視頻播放器。

網址：

https://www.maomin.club/site/videoplayer/

源代碼：

https://github.com/maomincoding/videoplayer

插件一覽

1. 界面簡約
2. 可配置
3. 流暢播放
4. 支持Vue2和Vue3
5. 支持m3u8格式
6. 支持多種事件

NPM地址

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

安裝

鍵入命令，即可安裝。

npm install vue-vam-video 

源碼地址

歡迎star！

https://github.com/maomincoding/vue-vam-video

配置參數

• properties: 視頻屬性
• videoStyle: 視頻樣式
• controlsConfig: 視頻控制設置

事件

案例

<template> 
  <div id="app"> 
    <vam-video 
      :properties="videoOption.properties" 
      :videoStyle="videoOption.videoStyle" 
      :controlsConfig="videoOption.controlsConfig" 
      @play="playVideo" 
      @canplay="canplayVideo" 
      @pause="pauseVideo" 
    ></vam-video> 
  </div> 
</template> 
 
<script> 
import VamVideo from "vue-vam-video"; 
export default { 
  name: "App", 
  components: { 
    VamVideo 
  }, 
  data: () => ({ 
    videoOption: { 
      properties: { 
        poster: require("./assets/logo.png"), 
        src: 
          // "https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/2A1343EFA/v3/6CC21C811065945606293295744/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4", 
          "https://tv.youkutv.cc/2019/11/12/mjkHyHycfh0LyS4r/playlist.m3u8", 
        preload: "auto", 
        // loop: "loop", 
        // autoplay:"autoplay", 
        // muted:true 
      }, 
      videoStyle: { 
        // width: "1200px", 
        // height: "600px", 
      }, 
      controlsConfig: { 
        fullScreenTit:"全屏", 
        EscfullScreenTit:"退出全屏", 
        speedTit:"倍速", 
        yinliangTit:"音量", 
        jingyinTit:"靜音", 
        playTit:"播放", 
        pauseTit:"暫停", 
        fullScreen:true, 
        speed:true, 
        listen:true 
      } 
    }, 
  }), 
  methods:{ 
    playVideo(){ 
      console.log("play"); 
    }, 
    pauseVideo(){ 
      console.log("pause"); 
    }, 
    canplayVideo(){ 
      console.log("canplay"); 
    } 
  } 
}; 
</script>