How to realize Video playback by vue.js

This article mainly introduces how to achieve video playback with vue.js, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let the editor take you to know it.

Vue.js to achieve video playback methods: 1, install vue-video-player plug-in; 2, import video.js;3 in main.js, use vue-video-player plug-in.

This article operating environment: windows10 system, vue 2.5.2, thinkpad T480 computer.

There is a vue-video-player plug-in in vue that we can use for video playback. Let's take a look at it.

Use vue-video-player (can be adaptive and support multiple formats)

(1) install the vue-video-player plug-in

Cnpm install-save vue-video-player

(2) Import video.js in main.js

Import VideoPlayer from 'vue-video-player'Vue.use (VideoPlayer) require (' vue-video-player/src/custom-theme.css')

(3) use

{{'Video' + I}}

Export default {name: 'Video2', data () {return {playerOptions: {playbackRates: [0.7,1.0,1.5,2.0], / / playback speed autoplay: false, / / if true, the browser starts playback when it is ready. Muted: false, / / any audio will be eliminated by default. Loop: false, / / causes the video to restart as soon as it ends. Preload: 'auto', / / suggests whether browsers should start downloading video data after loading elements. The auto browser chooses the best behavior and immediately starts loading the video (if the browser supports it) language: 'zh-CN', aspectRatio:' 16 zh-CN', aspectRatio 9 players, / / puts the player in smooth mode and uses this value when calculating the dynamic size of the player. The value should represent a scale-two numbers separated by colons (such as "16:9" or "4:3") fluid: true, / / when true, Video.js player will have the fluid size. In other words, it will scale proportionally to fit its container. Sources: [{type: 'video/mp4', / / the categories here support many kinds: basic video format, live streaming, streaming, etc. For more information, please see the git URL project src:'.. / static/video1.mp4' / / url address}], poster:'.. / static/full_res.jpg', / / your cover address width: document.documentElement.clientWidth, / / player width notSupportedMessage: 'this video cannot be played temporarily Please try again later, / / allow you to override the default message displayed when Video.js cannot play the media source. ControlBar: {timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true / / full screen Button}. Video-js .vjs-icon-placeholder {width: 80%; height: 80%; display: block;} / *. Video-player {width: 50% } * / Thank you for reading this article carefully. I hope the article "how to achieve Video playback in vue.js" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!