Implementation example of video player based on vue
- 2021-10-27 06:32:17
- OfStack
When the existing video player cannot meet the requirements, it is necessary to encapsulate video by itself.
video event
loadstart: Triggered when the video begins to load, assigning a value (historical playback record or 0) to currentTime. durationchange: The meta-information has been loaded or changed, and the length of the video has changed. The video length is obtained (duration, and currentTime is assigned a value (historical playback record or 0)). playing: Triggered when the video starts playing (whether it is first played, resumed after a pause, or restarted after the end). pause: Triggered when playback pauses. timeupdate: currentTime changes, updates playback progress. Processing the playback progress bar seeked: Specify Playback Position waiting: Buffering ended: Playback End, Reset Status WeixinJSBridgeReady: To use video in WeChat, you need to listen to weixinJSBridgeReady events and execute play () command in the callback function.
Live broadcast protocol
HLS (HTTP Live Streaming) is a live streaming protocol proposed by Apple. HLS is supported by both IOS and higher version Android. HLS is mainly composed of two playback files:. m3u8 and. ts. HLS has high compatibility and scalability, but it will broadcast live with delay. HLS protocol divides the live stream into 1 segment and 1 segment of short video to download and play, so assuming that the list contains 5 ts files, and each ts file contains 5 seconds of video content, the overall delay is 25 seconds.
RTMP (Real Time Messaging Protocol) is a set of live video protocol developed by Macromedia, which now belongs to Adobe. RTMP based on flash can't be played in IOS's browser, but it is better in real time than HLS.
HTTP-FLV is aimed at the live distribution stream of FLV video format, which has low delay. But the mobile terminal does not support it.
Conclusion: HTTP-FLV has low delay and is preferred. If the device does not support HTTP-FLV, use flv. js. If the device does not support flv. js, HLS is used, but HLS has a large delay.
Encapsulated video
/** HTML **/
<div class="video">
<!-- video player -->
<video
class="video__player"
ref="videoPlayer"
preload="auto"
:autoplay="options.autoplay"
:muted="options.muted"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5-page"
x5-video-orientation="portraint"
style="object-fit:cover;"
>
<source :src="options.src" />
</video>
<!-- video poster -->
<div
v-show="showPoster"
class="video__poster"
:style="{'background-image': 'url(' + options.pic + ')'}"
></div>
<!-- video loading -->
<div v-show="showLoading" class="video__Loading">
<span class="video__Loading-icon"></span>
</div>
<!-- video pause -->
<div @click="handleVideoPlay" class="video__pause">
<span v-show="!videoPlay" class="video__pause-icon"></span>
</div>
</div>
/** js**/
props: {
options: {
type: Object,
default: () => {}
}
},
data() {
return {
videoPlay: false, // Is it playing
videoEnd: false, // Whether the playback is over
showPoster: true, // Whether to display the video cover
showLoading: false, // Loading
currentTime: 0, // Current Play Position
currentVideo: {
duration: this.options.duration
},
}
},
mounted() {
this.videoPlayer = this.$refs.videoPlayer;
this.videoPlayer.currentTime = 0;
this.videoPlayer.addEventListener("loadstart", e => {
this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
});
// Get the video length
this.videoPlayer.addEventListener("durationchange", e => {
this.currentVideo.duration = this.videoPlayer.duration;
// Play history exists
this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
});
this.videoPlayer.addEventListener("playing", e => {
this.showPoster = false;
this.videoPlay = true;
this.showLoading = false;
this.videoEnd = false;
});
// Suspend
this.videoPlayer.addEventListener("pause", () => {
this.videoPlay = false;
if (this.videoPlayer.currentTime < 0.1) {
this.showPoster = true;
}
this.showLoading = false;
});
// Play progress update
this.videoPlayer.addEventListener("timeupdate", e => {
this.currentTime = this.videoPlayer.currentTime;
},
false
);
// Specify Play Position
this.videoPlayer.addEventListener("seeked", e => {
});
// Buffer
this.videoPlayer.addEventListener("waiting", e => {
this.showLoading = true;
});
// End of Play
this.videoPlayer.addEventListener("ended", e => {
// Reset state
this.videoPlay = false;
this.showPoster = true;
this.videoEnd = true;
this.currentTime = this.currentVideo.duration;
});
// Eavesdropping weixinJSBridgeReady Events and processing WeChat cannot be played automatically. But not all of them are applicable. Pause button is added and played manually.
document.addEventListener('WeixinJSBridgeReady', () => {
this.videoPlayer.play();
}, false);
},
methods: {
handleVideoPlay() {
if (this.videoPlayer.paused) { // Play
if(this.videoEnd) { // Replay
this.currentTime = 0;
this.videoPlayer.currentTime = 0;
}
this.videoPlayer.play();
this.videoPlay = true;
} else { // Suspend
this.videoPlayer.pause();
this.videoPlay = false;
}
}
}