This edition recommends MuiPlayer, an open source HTML5 video player plugin.

MuiPlayer is an open source HTML5 video playback plug-in, which is configured with exquisite and operable playback controls by default, involving common playback scenarios, such as full-screen playback, playback fast forward, loop playback, volume adjustment and other functions. Support mp4, m3u8, flv and other media formats to play, to solve most of the compatibility problems, while adapting to PC, mobile phone playback.

Feature

• All browser platforms play ui can not be unified
• Conflicts occur between ui extensions and state handling
• Different environments (android, ios, pc) may trigger events for the h5 video api at different times
• Media formats have various compatibility issues, and muiplayer handles most of the compatibility issues for playback in different environments
• Has a wealth of parameters can customize the player instance, through easy configuration can complete the video playback of custom scenes

Fast start

• Install

Install using npm:

npm i mui-player  --save

Install using yarn:

yarn add mui-player

• Use

1 Use the script tag to import:

< ! -- Introduce the base style file mu-player.min.css --> 
< link rel="stylesheet"  type="text/css" href="css/mui-player.min.css"/> 

< ! -- Introducing the base script mui-player.min.js --> 
< script type="text/javascript" src="js/mui-player.min.js"> < /script> 

< ! -- Specify the player container --> 
< div id="mui-player"> < /div> 

or use module manager to import:

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2 Define the player container

< div id="mui-player"> < /div> 

3 Initialize build player

// Initializes the MuiPlayer plug-in, the MuiPlayer method passes an object, This object includes the configuration of all plug-ins 
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'Title',
    src:'./static/media/media.mp4',
})

That will build a video player with default configuration controls for initialization.

More API basic configuration:
https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

Effect demonstration

• Basic effect

• Live mode

• Play subtitles

• Play screen

• Multi-window playback

You can read more on your own.