When inserting a video in a page, the first thing that comes to mind is the video tag, and you just specify that the SRC attribute is set to the address of the video. But when it comes to actual use, a lot of compatibility issues are exposed. Here are some of the bugs I’ve encountered while working on video projects:

  1. Google Chrome supports MP4, but MP4 video can be played in DivX or H264, while Chrome only supports H264.
  2. Mp4, MOV, AVI. Google Browser only supports H264 video format in MP4. Safari supports MOV, MP4 but avi does not
  3. Since the video is relatively large, loading the whole page directly is obviously not the best choice, so I came up with the idea of M3U8 streaming media, which fragments a large media file and plays it online directly with the player

M3u8 is a part of HLS protocol. It is a streaming media network transmission protocol based on HTTP proposed by Apple. The basic principle is to fragment a large media file, which can be understood as M3U8 as a video playlist. Most mobile devices support it, but safari on PC requires a library to implement

Concrete implementation steps

  • NPM install hls.js –save
  • Code implementation
const Hls = require("hls.js");
mounted(){
    const video = document.getElementById('m3u8video');
    if(! video)return false;
    const videoSrc = video.src
    if (video&&video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc;
    } else if (Hls.isSupported()) {
      const hls = newHls(); hls.loadSource(videoSrc); hls.attachMedia(video); }}Copy the code
  • See the effect

Const videoSrc = video.src+’? SRC +’? time=’+(new Date().getTime()); Results the following

You can view XHR requests in the Network through debugging while the video is playing, and you will find an M3U8 file and request several TS files at intervals.

The last

The video section is quite deep for in-depth discussion. This article mainly summarizes some pits encountered in the development process and corresponding solutions. If there are mistakes and omissions, welcome to discuss and point out, I will correct them in time, thank you!