Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to add video to vuejs". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to add video to vuejs".

Vuejs add video method: 1, insert video link through iframe; 2, add video by referencing vue-video-player plug-in.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs add videos?

Summary of two methods of inserting video based on Vue:

Method 1: iframe insert video link

1.1 # Video currently played

{{this.activeVideo.title}}

1. List of videos

{{video.title}} {{video.speaker}} {{video.views}} Views {{video.describe}}

1. The data structure defined by demo (written by yourself, the data structure returned by the background may be different in practice)

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

1." Click the video in the video list to convert to the current video

Ps: initially write the click event on iframe, but the click is not valid. Then I wrote a div, which solved perfectly:

1. Convert the click events of the current video: use 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)

Compared to the iframe method, I wrote a bunch of div and style,vue-video-player, which is so simple as to take off.

2. After using this plug-in for the first time, I am not familiar with it, so I wrote a videoPlayer component based on the official API. The code is as follows:

2.1-requirements requires the introduction of video.js and the definition of related options

Import 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)})}

2. Introduce the above videoPlayer component into the page where the video is inserted. The code in the view layer is as follows:

2. Plug-ins 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-define related data

Props: {state:Boolean,}, data () {return {videoOptions: {playbackRates: [1.0 record1.5 min2.0], / / playback speed autoplay:false, / / if true When the browser is ready to start playing back controls:true, muted:false, / / any audio loop:false will be eliminated by default, / / playback preload:'auto', / / load video language:'zh-CN', aspectRatio:'16:9', / / fluency mode immediately after loading elements And calculate the dynamic size of the player using this value fluid:true, / / scale to fit the container sources: [{src:' http://vjs.zencdn.net/v/oceans.mp4', type:'video/mp4'}], poster:' http://vjs.zencdn.net/v/oceans.png', / / cover address notSupportedMessage:' this video cannot be played temporarily Please try again later',} Thank you for reading, this is the content of "how to add video to vuejs". After the study of this article, I believe you have a deeper understanding of how to add video to vuejs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.