Vue Video Playing Plugin Vue-Video-Player specific usage

NPM Install Vue-Video-Player –save

can be introduced globally, or it can be introduced separately (two choice one) in the components that need to be used to the plugin [1] global reference, in main Inside .JS Inside and Reference

Import Video-Player’Import ‘Vue-Video-Player / Src / Custom-Theme.css’Import’ VIDEO .js / dist / video-js.css’ Vue.use (VideoUse (VideoUseer)
  [2] IMPORT {videoplayer} from 'Vue-Video-Player' within the assembly  
Import ‘video.js / dist / video-js.css’Export default {Components: {VideoPlayer}}

 [1] HTML portion   

 JS part   
export default {data () {Return {PlayerOptions: {Playbackrates: [0.5, 1.0, 1.5, 2.0], // Optional Play Speed ​​AutoPlay: False, // If true, the browser is ready to play back. Mute: false, // The audio will be eliminated by default. LOOP: FALSE, // Do you start again. Preload: 'auto', // Recommended browser to start downloading video data after loading elements . Auto browser selects the best behavior, immediately start loading video (if browser support) Language: 'zh-cn', aspectratio: '16: 9 ', // Place the player in a smooth mode, and calculate the player This value is used when the dynamic is large. Values ​​should represent a ratio-separated by colon (such as "16: 9" or "4: 3") Fluid: true, // When True, VideoJS Player will have fluid sizes. In other words, it will be scaled to accommodate its container. Sources: [{type: "VIDEO / MP4", // Type SRC: '' // URL Address}], POSTER: '', // Cover Address NotSupportedMessage: 'This video can not be played, please try again later' , // Allows override the default information displayed when the media source cannot play the media source. Controlbar: {TIMEDIVIDER: TRUE, // Current time and duration Separator DurationDisplay: true, // Display Duration RemainingTimedisplay: false, // Whether to display the remaining time function FullscreenToggle: True// Whether to display full screen button}}}}}
[12] [3] renderings

Video format
  Type: "video / webm" // can play, use OGG to open Type: "video / OGG" // can be played, Webm can also open Type: "VIDEO / 3GP" // can play Type: "VIDEO / MP4" // You can play Type: "video / avi" // can't open Type: "video / flv" // can't open TYPE: "video / mkv" // can't open Type: "video / mov" // can't open Type: "video / mpg" // can't open Type: "video / swf" // can't open Type: "video / ts" // can't open Type: "video / wmv" // can't open Type: "video / vob" // did not translate TYPE: "VIDEO / MXF" // Transformation error: "VIDEO / RM "// Transformation error  
Controls playback and suspension

vue视频播放插件vue-video-player的具体使用方法 this. $ REFS. VideoPlayer.Player.Play () // Play this. $ REFS.VIDEOPLAYER.PLAYER.PAUSE () // Pause this. $ refs.videOPlayer.Player.SRC (src) // Reset progress bar

Tune function


Export default {methods: {// Play callback overplayerplay (player) {Console.log (‘Player Play!’, Player) }, // Pause the callback onplayerpause (player) {console.log (‘Player Pause!’, Player)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} ReadyState Change results in playback onplayerwaiting ($ Event) {console.log (player)}}}}}}}}} {Console.log (player)} {console.log (player)}}}}} {console.log (player)}, // When the player is downloaded Trigger OnPlayerLoadedData ($ Event) {Console.log (Player)}}}}}}}}}}}}}}}} When the current playback location changes. onPlayerTimeupdate ($ event) {console.log (player)}, // media readyState is HAVE_FUTURE_DATA or higher onPlayerCanplay (player) {// console.log ( ‘player Canplay!’, player)}, // media readyState Have Have_enough_data or higher. This means that it can bePlay the entire media file in the case of buffering. onPlayerCanplaythrough (player) {// console.log ( ‘player Canplaythrough!’, player)}, // play state change callbacks playerStateChanged (playerCurrentState) {console.log ( ‘player current update state’, playerCurrentState)}, // the The listener is bound to the ready state of the component. The difference from the event listener is that if the Ready event has occurred, it will immediately trigger the function. . PlayerReadied (Player) {Console.log (‘Example Player 1 Readied’, Player);}},}

The above is all the content of this article, it is desirable Everyone’s learning is helpful, I hope everyone will support Tumi Clouds.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment