current position:Home>Preliminary research on video

Preliminary research on video

2022-04-29 20:33:26Twoyoung

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 :

 video .jpg

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: ' 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: '',
    //  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 
  <video-player  class="video-player-box"

  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: ""
          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)
      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)
        // you can use it to do something...
        // player.[methods]
 Copy code 

2.4 vue-video-player Plug in for

    PosterImage   // Default cover 
    BigPlayButton    // Big play button 
    ControlBar    //  Control bar 
        PlayToggle   // Play pause 
        FullscreenToggle   // Full screen 
        CurrentTimeDisplay   // Current playback time 
        RemainingTimeDisplay   // Play time remaining 
        ProgressControl   // time axis 
        VolumeControl   // Volume control 
       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(() => {
}, 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  I won't make a mistake .
 Copy code 

3.2 autoPlay Auto play

programme :…

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

A way that doesn't work :


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


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() {;
 perhaps :
SPA Set in 
// player is ready  initialization 
  playerReadied(player) {
    //  Actively call video playback  API
    console.log('---readied----') //  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) {;
 Copy code 

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

videoBtn4.addEventListener('touchstart', function (evt) {
 Copy code 

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

videoBtn5.addEventListener('touchstart', function (evt) {
    .then(function(response) {;
    .catch(function(myBlob) {;
 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" 
 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 :

Format IEFirefoxOperaChromeSafari
MPEG 49.0+NoNo5.0+3.0+
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 :

video.js file :…

tencent X5 Official explanation of kernel video behavior :…

video.js Problems encountered in :…

About MediaSource:

copyright notice
author[Twoyoung],Please bring the original link to reprint, thank you.

Random recommended