Recently, when the company launched its products, some advanced functions were not developed for users in the basic version, but displayed in the form of videos.

Vue was used for product development. The vuE-video-Player plug-in was introduced by my colleague, and the video playing effect was quickly realized through the demo case

<video-player
    class="vjs-custom-skin"
    ref="videoPlayer1"
    :options="playerOptions"
    :playsinline="true"
    :events="events"
    @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>
Copy the code

The boss looked at it and said, ‘You don’t need to switch to full screen, you don’t need to let the user look at it that closely ‘,

Through the configuration item controlBar: {fullscreenToggle: False}, after the full screen switch is turned off, the contents of the video cannot be seen clearly because the video is clearly marked and the display area is 483px X 303px. The boss says: “To achieve the full screen, the whole screen is not covered, but the pop-up layer of a fixed size is displayed.”

The first thing that comes to mind is: open the full screen switch, listen to the event of the full screen switch, forcibly exit the full screen in the event, and display the pop-up layer of a fixed size

<video-player
    ...
    :events="events"
    @fullscreenchange="onPlayerFullScreenchange($event)". > </video-playerdata () {
    return {
        videoDialogVisible: false// Control events: ['fullscreenchange'] } }, methods: { ... OnPlayerFullScreenchange (player) {player.exitfullscreen () // force exitFullscreen, return to normal size this.videoDialogVisible =true}... }Copy the code

This method, although can be implemented, but in the forced exit of the full screen that, the whole page will jump, encounter slow network speed, or computer card situation, the effect is worse…

No way, continue to think about ways, in the plug-in GitHub library, there are netizens mentioned related issues, by registering a custom button component, added to the player’s controlBar, replace the default full-screen switch button

import * as videojs from 'video.js'

export default {
    ...
    methods: {
        ...
        createMyButton () {
            let Button = videojs.getComponent('Button')
            let myButton = videojs.extend(Button, {
                constructor: function (player, options) {
                    Button.apply(this, arguments)
                    this.addClass('fullscreen-enter'}, handleClick: () => {// bind click event}, buildCSSClass:function () {
                  return 'vjs-icon-custombutton vjs-control vjs-button'}}) / / registered videojs. RegisterComponent ('myButton', myButton)
            
            this.$nextTick(() => {// Add this to the controlBar.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton')})}... }} // specify a custombutton style in the style <style>. Video-js {.vjs-control-bar{.vjs-icon-custombutton {font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-custombutton:before { content:"\f108"; The font - size: 1.8 em. The line - height: 1.67; } } } } </style>Copy the code

Custom button ICONS still use the default full screen icon, and then implement button click events

There are two player instances in the page and pop-up layer, videoPlayer1 and videoPlayer2 respectively. When the custom switch event is triggered, the two players synchronize (videoPlayer1 played for 10 seconds, after the full screen switch, videoPlayer2 has to continue playing from 10 seconds, not from the beginning).

onCustombuttonClick () {
    let _time = this.$refs. VideoPlayer1. Player. CurrentTime () / / playing time this.$refs.videoPlayer2.player.currentTime(_time)
    this.$refs.videoPlayer2.player.play()
}
Copy the code

Similarly: After closing the pop-up layer, assign the playback duration of videoPlayer2 to videoPlayer1 by listening for events such as pop-up layer display and hide