Preface ：

Due to the use of video.js Of vue-video-player plug-in unit ; So the research is not limited to vue-video-player act ; It also includes video basics , plug-in unit video.js as well as Native Label at mobile end （android And ios） The performance of the ;

1. Video Basics ：

2. Application in project :

Two ways ：

2.1 stay HTML of use data-setup

<video data-setup='{ "autoplay": false, "preload": "auto" }'...>
 Copy code 

2.2 video.js of use options The ginseng

// videojs options
  options: {
    // muted: true, //  Mute playback or not 
    autoplay: false, //  Whether the player will play automatically when it is ready 
    loop: false, //  Loop Playback 
    liveui: true,
    preload: 'metautoadata',
    language: 'en',
    playbackRates: [0.5, 1.0, 1.5, 2.0], //  Broadcasting speed 
    aspectRatio: '16:9', //  Video adaptation ratio 
    fluid: true, //  The player zooms to fit its container 
    bigPlayButton: true, //  Big play button in the middle of the video 
    // flash: {
    //   swf: 'video-js-fixed.swf'
    // },
    controlBar:{ // Set whether to display the component 
      'currentTimeDisplay': true, //  current time 
      'timeDivider':true, //  Time divider 
      'durationDisplay':true, //  The duration shows 
      'remainingTimeDisplay':true, //  The remaining time shows 
      'volumeMenuButton': {
        inline: true,// set volume bar For the level 
        vertical: false// set volume bar Is vertical 
      }
    },
    //  Video stream resource set 
    sources: [{
      type: "video/mp4",
      src: 'https://xxx.com/video/ Industrial injury insurance advertisement .mp4'
    }],
    notSupportedMessage: ' This video can't be played , Please try again later ' //  Allow to override Video.js The default information displayed when the media source cannot be played 
    //  Play the previous video 
    poster: 'https://xxx.com/upload/82.png',
    //  Control button display sequence （ Component sequence ）
    // children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'subtitlesButton', 'captionsButton', 'fullscreenToggle']
      },
 Copy code 

2.3 vue Support in ：

vue References in are based on video.js Of vue-video-player plug-in unit

//  How to use local registration 
<template>
  <video-player  class="video-player-box"
     ref="videoPlayer"
     :options="playerOptions"
     :playsinline="true"
     customEventName="customstatechangedeventname"
     @play="onPlayerPlay($event)"
     @pause="onPlayerPause($event)"
     @ended="onPlayerEnded($event)"
     @waiting="onPlayerWaiting($event)"
     @playing="onPlayerPlaying($event)"
     @loadeddata="onPlayerLoadeddata($event)"
     @timeupdate="onPlayerTimeupdate($event)"
     @canplay="onPlayerCanplay($event)"
     @canplaythrough="onPlayerCanplaythrough($event)"
     @statechanged="playerStateChanged($event)"
     @ready="playerReadied">
  </video-player>
</template>

<script>
  import 'video.js/dist/video-js.css'
  import { videoPlayer } from 'vue-video-player'

  export default {
   components: { videoPlayer },
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.5, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "http://cdn.moji.com/websrc/video/spring20200311.mp4"
          }],
          poster: "/static/images/author.jpg",
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
        this.$refs.videoPlayer.player.play()
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      // ...player event

      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },

      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)
        player.play()
        // you can use it to do something...
        // player.[methods]
      }
    }
  }
</script>
 Copy code 

2.4 vue-video-player Plug in for

Player
    PosterImage   // Default cover 
    TextTrackDisplay
    LoadingSpinner
    BigPlayButton    // Big play button 
    ControlBar    //  Control bar 
        PlayToggle   // Play pause 
        FullscreenToggle   // Full screen 
        CurrentTimeDisplay   // Current playback time 
        TimeDivider
        DurationDisplay
        RemainingTimeDisplay   // Play time remaining 
        ProgressControl   // time axis 
               SeekBar
               LoadProgressBar
               PlayProgressBar
               SeekHandle
        VolumeControl   // Volume control 
              VolumeBar
              VolumeLevel
              VolumeHandle 
       PlaybackRateMenuButton  // Playback rate 
 Copy code 

》》》 For a more detailed introduction, you can see the... At the end of the article 4.0 Refer to the official information given in the document ;

3. Start stepping on all kinds of pits :

3.1 The play() request was interrupted by a call to pause()

The player is executing play() Method is executed immediately after pause() Caused by ;

resolvent ： In execution play() Add a timer when ;

setTimeout(() => {
  $video.play();
}, 10 );


//  I personally tested this method, and there was no effect , But let's record it here ....
//  Finally, I changed the call play() The timing of , Adopted   stay  @ready  Call the instantiated... In the callback  player  Instance to execute  player.play()  I won't make a mistake .
 Copy code 

3.2 autoPlay Auto play

programme ：

blog.videojs.com/autoplay-be…

To solve iOS Autoplay problem on , Please do not use videojs Option to automatically play video .

A way that doesn't work ：

（1）

<video id="my-video-id" autoplay></video>
 Copy code 

（2）

videojs('my-video-id', {
  "autoplay": true
});
 Copy code 

Instead, wait for the video object to load , Then trigger the playback operation ：

videojs('my-video-id').ready(function() {
  this.play();
});
 perhaps ：
SPA Set in 
// player is ready  initialization 
  playerReadied(player) {
    //  Actively call video playback  API
    console.log('---readied----')
    player.play() //  Active call play api
    console.log('--- Perform playback ----')
},
 Copy code 

A、video Video playback trigger condition ：

1、touch since chromeM55 Remove from gesture events after version ; The video cannot be played for the first time in touch start Medium trigger ;

2、touch end Follow click Gesture events have certain time overlap , The first playback of the video may be triggered , But it's not reliable ;

3、 The first playback of the video can be in click Medium trigger ;

videoBtn3.addEventListener('click', function (evt) {
    video.play();
})
 Copy code 

4、 The first playback of the video cannot be performed in timer Triggered in response ;

videoBtn4.addEventListener('touchstart', function (evt) {
    setTimeout(function(){
        video.play();
    },1000); 
})
 Copy code 

5、 The first playback of the video cannot be performed in promise Trigger in callback ;

videoBtn5.addEventListener('touchstart', function (evt) {
  fetch('./video_gesture.html')
    .then(function(response) {
        video.play();
    })
    .catch(function(myBlob) {
        video.play();
    });
})
 Copy code 

B、 Other causes ：

1、chrome6 And later versions do not allow automatic media playback ;

2、safari Prevent autoplay of video .opera prevent autoplay;

3、 For user experience , Consideration of saving traffic , Automatic playback is prohibited on the mobile terminal ;

4、 The video file is too large , Loading time is too long or error ;

C、 summary ：

1. After adjusting all the above strategies ,IOS It can basically realize automatic playback , But set the mute , namely ： No audio track , Or set up muted=true attribute .

2. Android's words , Only some models can play automatically . And you can't simulate autoplay , There must be user behavior （ Click the play button ） To trigger playback , In other words, the active behavior of users is stable .

3.3 Multi terminal playback behavior consistency processing

<video id="theVideo" 
  class="video-player" 
  preload="auto" 
  src="http://xxx" 
  type="video/mp4" 
  width="100%" 
  webkit-playsinline="true" 
  playsinline="true" 
  x5-video-player-type="h5" 
  x5-video-player-fullscreen="portraint"
  x-webkit-airplay="true"
  x5-playsinline=""></video>
 Copy code 

For adaptation iOS With Android , The last four attributes play a key role ;

webkit-playsinline="true";playsinline="true" The functions and iOS System , Use playsinline Prevent users from playing videos in full screen , No control attribute , Removed the control of the system , It is convenient to provide users with player controls written by themselves , Make different systems behave consistently .

x5- The first two properties , Acting on Android , Because the wechat browser kernel of Android system is X5,

x5-playsinline="";x5-video-player-type="h5";x5-video-player-fullscreen="landspace" These are two general configurations , Make the video horizontal Same layer mode Play .

3.4 Video coding （ Not in format ） This leads to the problem that some browsers play sound without picture

Problem description :

The progress bar can move with sound but no image . Under the baidu , Understand the relevant knowledge points ;

principle ：

at present video Only tags are supported MP4,WebMail,Ogg Video format ;

Compatibility of major browsers with three video formats ：

MP4 = MPEG4  Files use  H264  Video codec and AAC Audio codec 
WebM = WebM  Files use  VP8  Video codec and  Vorbis  Audio codec 
Ogg = Ogg    Files use  Theora  Video codec and  Vorbis Audio codec 
 Copy code 

among MP4 Yes 3 Kind of code ,MPEG4(DivX)、MPEG4(Xvid)、AVC(H264); But only H264 Is recognized MP4 Standard coding .

Solution ：

download “ Format Factory ”, Change the code in the output configuration to AVC(H264) , Export video , Upload the server again , Get it done ！！！;

3.5 Video resources cannot be loaded properly

problem ：

The media could not be loaded, either because the server or network failed or because the format is not supported
 Copy code 

screening ：

When investigating this problem, you can follow the following steps to eliminate the cause in turn ：

1、 verify video Of url Is there a wrong address ;

2、 Verify where the user is online （ There may be restrictions in some areas , For example, Xinjiang 、 Tibet ）;

3、 Verify the user's online environment , Is it a home network or a company network , If it's a home network , Let the user restart the router . If it's a corporate network , Let the user ask the company network management whether to ban the relevant protocol ;

4、 If it is not possible to determine whether the connected network forbids the relevant protocol , Users can be advised to use the computer to connect to the mobile phone hotspot before trying to play , If you can play it after connecting the hotspot of the mobile phone , It must be that the video protocol has been banned ;

5、MP4 Video format coding problems , see 2.4.

4. Reference documents ：

vue-video-player file ： https://github.com/surmon-china/vue-video-player

video.js file ： docs.videojs.com/tutorial-op…

tencent X5 Official explanation of kernel video behavior ： x5.tencent.com/tbs/guide/v…

video.js Problems encountered in : www.cnblogs.com/loveamyfore…

About MediaSource： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource