About video.js
video.js have h5 background is a web video player, h5 and supports Flash video playback (video can be loaded locally static resources and network links Video)
Official website: videojs.com/
installation
npm install video.js
main.js introduced
import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
use
<div class="demo1-video"> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls // determine whether the player has control user can interact with. No controls, the only way to start is to use the autoplay video playback or property by Player API. autoplay: "muted", // // autoplay attribute, muted: Mute Play preload = "auto" // recommend whether the browser should load the <video> element start after downloading the video data immediately. poster = "../ assets / img / E0531.jpg"> // set the video cover of <source src = "../ assets / video / E0531.mp4" type = "video / mp4"> // video address </video> </div>
Css can be used directly to control the width and height of the video
The effect achieved screenshots
Above: For a simple application is complete it video.js