Vue.js Custom video components.

Overview

vue-vam-video

Vue.js Custom video components

Using documents

1. Introducing components

npm install vue-vam-video

2. configuration parameter

  • properties: Video properties.

  • videoStyle: Video style.

  • controlsConfig: Video control settings.

3. Support m3u8 video format

No need to install any dependencies, the introduction of m3u8 link can play.

4. Support for Vue 2 & Vue 3

5. Support events

Event name When to trigger
play The media has received a request to start playing
pause Playback has been suspended
canplay Playback can start
ended The media has played once and stopped
waiting Pause playback to download more data
canplaythrough Playback can continue and should not be interrupted. Readstate is 3
error A network error occurred during the download
volumechange The value of the volume or muted property has changed
emptied The network connection is down
ratechange Media playback rate changes
empty An error occurred, blocking media download
seeking Playback has moved to a new location
timeupdate The current time was changed unconventionally or unexpectedly
stalled The browser tried to download but has not received data yet
abort Download interrupted

Examples are as follows

<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>
Issues
Owner
maomincoding
A front-end engineer.
maomincoding
Record video or snapshots from device cameras or desktop. Upload and download of video or snapshots is supported.

Multicorder Record video from cameras Record video from desktop screens Playback recordings Take snapshots of video Download videos or snapshots Demo

Brian Winkers 6 Nov 11, 2021
Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player

vue-playlist Simple vue component that takes an array of videos as a prop and stitches them together/plays seamlessly in a custom video player This is

misha. 26 Oct 8, 2021
A Vue.js based video player with good look and custom user config

Awesome-Video-Player A Vue.js based video player with good look and custom user config ✅ good-looking & support custom config ✅ Vue 2 & Vue 3 Support

Ziwen Mei 102 Dec 20, 2021
:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: Easy to create custom audio player components for Vue. 一个有灵魂的进度条。 A progress bar with soul.

vue-audio-better Easy to create custom audio player components for Vue.js. 一个有灵魂的进度条。 A progress bar with soul. 简单、有趣的 audio 组件,非常感谢您的 star! Simple, f

JasonYu 87 Jan 20, 2022
A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components

vue-howler A Howler.js mixin for Vue 2 that makes it easy to create custom audio player components Installation $ npm install vue-howler Usage First c

Mick Dekkers 105 Jan 5, 2022
📹 A Vue 2.x video player component based on DPlayer

Vue-DPlayer A Vue 2.x video player component based on DPlayer. Live Demo Install npm install vue-dplayer -S Usage CDN: https://unpkg.com/[email protected]

MoePlayer 589 Jan 13, 2022
A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.

vue-plyr v7.0.0 - Changelog A vue component for the plyr video & audio player. This is useful for when you want a nice video player in your Vue app. I

Gabe Dunn 630 Jan 19, 2022
🍟 A Lightweight Video Player For Vue.js.

vue-core-video-player A Lightweight Video Player For Vue.js. Get Started Npm $ npm install vue-core-video-player --save Yarn $ yarn add vue-core-video

core-player 284 Jan 13, 2022
A hml5 video player vue component

vue-player author - Artur Sena license - MIT Intro This is a html5 video component made in VueJS with to quickly add videos with placeholders and intr

Artur Sena 22 Jan 9, 2022
Video Background component for Vue.js

Video Background Install via NPM Available through npm as vue-videobg. npm install --save vue-videobg Usage import VideoBg from 'vue-videobg' Vue.co

Pantelis Peslis 245 Jan 19, 2022
Subscription-based Video sharing platform for content creators. Python + Vue

A new era of subscription-based Video sharing for content creators. Upload videos and share them with people subscribed to you. (Note: Payment is a future prospect, Subscribing is free as of now).

Neelansh Mathur 7 Oct 29, 2021
Open-source Voice & Video Calling and Text Chat App for Vue (JavaScript/Web)

Open-source Voice & Video Calling and Text Chat App for Vue (JavaScript/Web)

CometChat Pro 16 Jan 14, 2022
Conversor de moedas com Vue JS . Projeto desenvolvido acompanhando vídeo do canal Programador BR.

conversor Conversor de moedas com Vue JS . Projeto desenvolvido acompanhando vídeo do canal Programador BR. LINK: https://www.youtube.com/watch?v=tIEa

Leandro Cesario Torres 1 Nov 23, 2021
A Vue2 plugin to make video play easier

v-playback A Vue2 plugin to make video play easier Examples、Documentation and Changelog Explorer on English site 国内站点 Installation npm i -S v-playback

Terry Zeng 19 Nov 17, 2020
Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Embed a YouTube player easily and lazy load the video to save resources and reduces initial load size.

Seerat Awan 22 Jan 19, 2022
A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player!

vue3-player-video A modern, visual video player for Vue3. It will bring your videos to life with a customizable and powerful player! If you have a pro

Enzo Esteves ⚡ 26 Sep 22, 2021
Vega is a open source web based video editor.

Vega is a open source web based video editor. This is an experimental project.

toshusai 38 Jan 19, 2022
Youtube video playback controller

y2pilot.com Smart YouTube playlist manager app. Live app I decided to share this as open source even though it's far from a solid and clean codebase.

Luka Vidaković 2 Oct 24, 2021
MegSpot is an efficient, professional, cross-platform image & video comparison application.

MegSpot is an efficient, professional, cross-platform image & video comparison application.

旷视天元 MegEngine 165 Jan 11, 2022