How to add video in vuejs: 1. Insert the video link through iframe; 2. Add the video by citing the vue-video-player plug-in.
The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.
How to add video to vuejs?
Summary of 2 methods to insert video based on Vue:
Method 1: Insert video link into iframe
1.1
## Currently playing video##Video list
{{video.title}}
{{video.speaker}} {{video.views}} Views{{video.describe}}
1.3
## Defined data structure (demo written by myself, may be practical The data structure returned in the middle and backend will be different)
data () { return { flag:false, videos:[{ id:1,title:'test2',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:101,views:0,describe:'good' },{ id:2,title:'test3',youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA',speaker:'harry', likes:100,views:75,describe:'good' }], activeVideo:{ id:3,title:'test1',thumbnail:'./../../static/images/headImg.png',speaker:'harry', likes:0,views:0,describe:'good', youtobeURL:'http://player.youku.com/embed/XMzcwNTY3NTM2MA' } } }
## Click the video in the video list to change to the current video
ps: At the beginning, the click event was written on the iframe, but the click was invalid. Later I wrote a div, the perfect solution:
1.5
##Convert the click event of the current video: Use the id to determine which one is currently clicked
activeVideoShow(id){ this.videos.filter(item=>{ if(id == item.id){ this.activeVideo=item } }) }
Method 2: Reference the vue-video-player plug-in (no video list)
Write a bunch of divs relative to the iframe method And style, vue-video-player is simply streamlined to take off 2.1##The first time I used this plug-in, I was not very familiar with it, so I wrote a videoPlayer component based on the official API. The code is as follows:
2.1-1
##Need to introduce video.js and define related optionsimport videojs from 'video.js' --------------------------------- props:{ options:{ type:Object, default(){ return{ } } } }, data(){ return{ player:null } }, mounted(){ this.player=videojs(this.$refs.videoPlayer,this.options,function onPlayerReady(){ console.log('onPlayerReady',this) }) }
##Introduce the above videoPlayer component into the page where the video is inserted, and the code in the view layer is as follows:
##Plug-ins that need to be introduced
import './../../node_modules/video.js/dist/video-js.css' import './../../node_modules/vue-video-player/src/custom-theme.css' import videojs from 'video.js' import {videoPlayer} from 'vue-video-player' import 'videojs-flash' import VideoPlayer from '@/components/videoPlayer.vue'
2.3-1
##Define related dataprops:{ state:Boolean, }, data(){ return{ videoOptions:{ playbackRates:[1.0,1.5,2.0], // 播放速度 autoplay:false, // 如果true，浏览器准备好时开始回放 controls:true, muted:false, // 默认情况下将会消除任何音频 loop:false, //循环播放 preload:'auto', //
The above is the detailed content of How to add video in vuejs. For more information, please follow other related articles on the PHP Chinese website!
What to do with the video card
How to download videos from Douyin
Comparative analysis of win10 home version and professional version
How to open php file
The difference between JD.com's self-operated flagship store and its official flagship store
How to open hosts file
How to install ssl certificate
Regular expression does not contain
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
