preface

A Web video player plug-in based on Vue. Js is officially released today. Configurable, flexible operation. Come and experience it with me!

Online Address Experience

Based on Vue3.0 and VUE-vam-Video, I developed an online video player.

Web site:

https://www.maomin.club/site/videoplayer/
Copy the code

The source code:

https://github.com/maomincoding/videoplayer
Copy the code

Plug-in to see

  1. Interface simple

  2. configurable

  3. Fluent playing

  4. Vue2 and Vue3 are supported

  5. Supports M3U8 format

  6. Support for multiple events

NPM address

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

The installation

Type the command to install.

npm install vue-vam-video
Copy the code

The source address

Welcome to star!

https://github.com/maomincoding/vue-vam-video
Copy the code

Configuration parameters

  • Properties: Video properties

  • VideoStyle: videoStyle

  • ControlsConfig: Video control Settings

The event

The name of the event How to trigger
play The media received a request to start broadcasting
pause suspended
canplay Play can start
ended The media played once and then stopped
waiting Pause playback to download more data
canplaythrough Playback can continue and should not be interrupted. The read status is 3
error A network error occurred during the download
volumechange The value of the volume or fraternal attribute has changed
emptied Network connection down
ratechange The media playback rate changed
empty An error occurred blocking media download
seeking Playback has been moved to a new location
timeupdate Unusual or unexpected change in the current time
stalled The browser tries to download, but hasn’t received the data yet
abort Download the interrupt

case

<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_6 000_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:"Full screen".EscfullScreenTit:"Exit full screen".speedTit:"Times".yinliangTit:"Volume".jingyinTit:"Mute".playTit:"Play".pauseTit:"Pause".fullScreen:true.speed:true.listen:true}}}),methods: {playVideo(){
      console.log("play");
    },
    pauseVideo(){
      console.log("pause");
    },
    canplayVideo(){
      console.log("canplay"); }}};</script>
Copy the code

  • Welcome to pay attention to my public number front end experience robbed road

  • Reply keywords e-books, you can get 12 front-end popular e-books.

  • Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

  • I have created a technical exchange and article sharing group, in which there are many front leaders of big factories. After following the public account, click the menu below to learn more and you can add my wechat. I look forward to your joining.

  • Author: Vam’s Golden Bean Road

  • Public number: the front end of the road through robbery