Player Component Vue Video Player Operation for Vue

If the label of h5 < vedio > If it doesn't meet your needs, use this component Vue-Video-Player, which may cover your needs.

<video-player
   class="video-player vjs-custom-skin"
   ref="videoPlayer"
   :playsinline="true"
   :options="playerOptions"
></video-player>

Configuration parameters:

playerOptions: {
    height: 400,
    playbackRates: [0.7, 1.0, 1.5, 2.0], //  Play speed 
    autoplay: false, //  If true, Start playback when the browser is ready. 
    muted: false, //  By default, any audio will be eliminated. 
    loop: false, //  Cause video 1 Start over when it's over. 
    preload: "auto", //  It is recommended that browsers use the <video> Whether you should start downloading video data after loading the element. auto Browser selects best behavior , Start loading video now (if your browser supports it) 
    language: "zh-CN",
    aspectRatio: "16:9", //  Put the player in fluent mode and use this value when calculating the dynamic size of the player. The value should represent the 1 Percentage ratio  -  Two numbers separated by colons (for example "16:9" Or "4:3" ) 
    fluid: true, //  When true When, Video.js player Will have fluid size. In other words, it will be scaled to fit its container. 
    sources: [
     {
      type: "video/mp4", //  There are many types supported here: basic video format, live broadcast, streaming media, etc. For details, please refer to git Web site project 
      src: require("@/assets/vedio.mp4") // url Address 
     }
    ],
    poster: require("@/assets/poster.png"), //  Your cover address 
    // width: document.documentElement.clientWidth, // Player width 
    notSupportedMessage: " This video is temporarily unplayable. Please try again later ", //  Allow overrides Video.js The default information displayed when the media source cannot be played. 
    controlBar: {
     timeDivider: true,
     durationDisplay: true,
     remainingTimeDisplay: false,
     fullscreenToggle: true //  Full screen button 
    }
   },

Please refer to the specific use by yourself and attach a link

https://www.npmjs.com/package/vue-video-player

Additional knowledge: vue about blank pages under Android lower versions

Internet search for many reasons are not solved, guess which part of the code is incompatible, and finally comment code 1 step by step to check the reasons

Then it was found that the pot of swiper, the high version 5.3. 6 we used, should be Android low version incompatible with swiper5 es6 or es7 advanced syntax

Later, we rolled back to version 3.4. 2 and successfully resolved

Summary:

Pay attention to the compatibility of various plug-in versions in the future