基于Vue.js的Web視頻播放器插件vue-vam-video@1.3.6 正式發(fā)布

前言

今日正式發(fā)布一款基于Vue.js的Web視頻播放器插件。可配置，操作靈活。跟我一起來體驗吧！
線上地址體驗

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

網(wǎng)址：

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



源代碼：

https://github.com/maomincoding/videoplayer



插件一覽



   















界面簡約

    可配置

    流暢播放

    支持Vue2和Vue3

    支持m3u8格式

    支持多種事件

NPM地址

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





















安裝

鍵入命令，即可安裝。

npm install vue-vam-video

 

源碼地址

歡迎star！

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



配置參數(shù)

    properties: 視頻屬性

    videoStyle: 視頻樣式

    controlsConfig: 視頻控制設(shè)置

事件























案例

<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>

作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路