introduce

vue video player is the vue version of videojs
video.js Official website: https://videojs.com/
Refer to the official website: Video.js Is a web video player built from scratch for the HTML5 world. It supports HTML5 video and modern streaming formats, and it supports video playback on desktops and mobile devices.

install

1. Installation depends on NPM I Vue video player-d
2. Global reference:

	// stay mian.js Introduced inside
	import "video.js/dist/video-js.css";
	import {videoPlayer} from "vue-video-player";
	Vue.use(VideoPlayer)

Or local reference

	// Page index in use
	import "video.js/dist/video-js.css";
    import {videoPlayer} from "vue-video-player";
    
    // Declare video player in components
    components: {
            videoPlayer
        }
    

usage

<video-player class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @ready="playerReadied"
    @statechanged="playerStateChanged($event)">
</video-player>

Configuration item

playerOptions

• Playbackrates: [0.5, 1.0, 1.5, 2.0], / / optional playback speed
• Autoplay: false, / / if true, the browser will play back when it is ready.
• Muted: false, / / any audio will be removed by default.
• Loop: false, / / start again as soon as the video ends.
• preload: 'auto', / / it is recommended that the browser start downloading video data after loading elements. Auto browser selects the best behavior and starts loading the video immediately (if supported by the browser)
• language : 'zh-CN',
• aspectRatio: '16:9', / / places the player in fluent mode and uses this value when calculating the dynamic size of the player. The value should represent a scale - two numbers separated by colons (for example, "16:9" or "4:3")
• Fluid: true, / / when true, Video.js The player will have the fluid size. In other words, it scales to fit its container.
• sources : [{ type : “”, src : ‘ http://www.html5videoplayer.net/videos/madagascar3.mp4 ’//url address}],
• Post: "", / / your cover address
• width: document.documentElement.clientWidth,
• notSupportedMessage: 'this video cannot be played temporarily. Please try again later', / / overwrite allowed Video.js Default information displayed when the media source cannot be played.
• ControlBar: {timedivider: true, / / the separator of current time and duration durationdisplay: true, / / display durationtimedisplay: false, / / display the remaining time function fullscreentoggle: true / / full screen button
  }

event

methods: {
    //Monitor and play
    onPlayerPlay (player) {
        console.log(player);
        // this.$refs.videoPlayer.player.play();
    },
    //Monitor pause
    onPlayerPause (player) {
        console.log(player);
        // this.$refs.videoPlayer.player.pause();
    },
    //Monitor and play status change
    playerStateChanged (player) {
        // console.log(player);
    },
    //Monitor whether the media has reached the end and played out
    onPlayerEnded (player) {
        // console.log(player);
    },
    //A readyState change on the DOM element causes playback to stop.
    onPlayerWaiting (player) {
        // console.log(player);
    },
    //The media is no longer banned and has started playing.
    onPlayerPlaying (player) {
        // console.log(player);
    },
    //Triggered when the player downloads data at the current playing position
    onPlayerLoadeddata (player) {
        // console.log(player);
    },
    //Triggered when the current playback position changes.
    onPlayerTimeupdate (player) {
        // console.log(player);
    },
    //The readyState of the media is HAVE_FUTURE_DATA or higher
    onPlayerCanplay(player) {
        // console.log('player Canplay!', player)
    },
    //The readyState of the media is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.
    onPlayerCanplaythrough(player) {
        // console.log('player Canplaythrough!', player)
    },
    //Bind the listener to the ready state of the component. The difference from the event listener is that if the ready event has already occurred, it will trigger the function immediately..
    playerReadied(player) {
        // seek to 10s
        console.log('example player 1 readied', player);
        // player.currentTime(0)
        // console.log('example 01: the player is readied', player)
    }
}