Video player

Vue video player plugin vue - dplayer, support m3u8 format, mp4 format.

1. NPM, installed in the root directory of the vue
NPM install vue - video - player - save
NPM install videojs - contrib - HLS - save

In the main. Js
//video
Import VideoPlayer from 'vue - video - player'
Require (' video. Js/dist/video - js. CSS ')
Require (' vue - video - player/SRC/custom - theme. CSS ')
Vue. Use (VideoPlayer)
Const HLS=the require (' videojs - contrib - HLS)
Vue. Use (HLS)

3. The HTML code, the need to introduce the directory into



4. It takes in a variable to js
PlayerOptions: {
//playbackRates: [0.7, 1.0, 1.5, 2.0],//play speed:
The autoplay: true,//if true, the browser when ready to start playback,
Muted: false,//by default will eliminate any audio,
Loop: true,//lead to the end of a video resume,
Preload: 'auto'/browser/Suggestions in & lt; Video> After loading elements should begin to download the video data, auto browser chooses the best behavior, immediately start loading video (if the browser supports)
Language: 'useful - CN,
AspectRatio: 'next',//put players in fluid model, and used in calculating dynamic size of the player that value, value should represent a proportion - use a colon delimited two Numbers (such as "16:9" or "4:3")
Fluid: true,//when true Video. Js player will have fluid size, in other words, it will be scaling to accommodate its container,
Sources: [
{
Type: 'application/x - mpegURL',//type
SRC:
'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'//path
},
{
SRC: "',//path
Type: 'video/mp4//type
},
{
Type: 'video/mp4,//the kind support here quite a variety: basic video format, live, such as streaming media, specific see git site project
SRC: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'//url address
}
],
HLS: true,
Poster: "',//the cover of your address
Width: the document. The documentElement. ClientWidth,//player width
NotSupportedMessage: 'the Video temporarily unable to play, please try again later',//allow cover Video js cannot play media source displayed when the default information,
ControlBar: {
TimeDivider: true,
DurationDisplay: true,
RemainingTimeDisplay: false,
FullscreenToggle: true//full screen button
}
},