The cause of

The requirement is that the page should be able to play HLS video, and at least be adapted to IE11.

Video. Js7 built-in VideoJS-HTTP-Streaming (VHS) plug-in, native support for playing HLS Video. Good experience with Vue:

Videojs-playlist is also used to implement playlists:

<template>
  <div class="video">
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'videojs-playlist';

export default {
  name: 'VideoPlayer'.props: {
    playlist: {
      type: Array.required: true,},selectedVideoIndex: {
      type: Number.default: 0,}},data() {
    return {
      player: null}; },watch: {
    playlist(newValue) {
      if (!this.player) return;

      this.player.playlist(newValue);
      this.player.playlist.autoadvance(0); },... },mounted() {
    const that = this;

    this.player = videojs(
      this.$refs.videoPlayer,
      {
        controls: true.fill: true.autoplay: true.preload: true,},function onPlayerReady() {
        this.on('canplay', that.handleVideoCanPlay);
        this.on('waiting', that.handleVideoWaiting);
        this.on('play', that.handleVideoStart);
        this.on('pause', that.handleVideoPause);
        this.on('playlistitem', that.handleVideoChange);
        this.on('error'.(err) = >that.handleError(err)); }); },methods: {... }};</script>
<style scoped>.</style>

Copy the code

Functional testing and compatibility testing didn’t show any problems until a colleague opened the play page on his Windows 7 laptop…

Result is in Windows 7 IE11 completely broadcast video, immediately Google reason, find:

  • Github.com/videojs/vid…
  • Juejin. Cn/post / 684490…

The solution

According to the link above, the VideoJS developers suggested using Flash player to play HLS videos on Windows 7 IE11, so we need to introduce two libraries:

  • Videojs-flash allows VideoJS to play video through Flash
  • Videojs-flashls-source-handler provides special SWF files that allow Flash to play HLS videos

Modify the code

  1. Start by introducing two libraries into the player component:
import videojs from 'video.js';
import 'videojs-playlist';
import 'videojs-flash';
import '@brightcove/videojs-flashls-source-handler';
Copy the code
  1. Then declare the techOrder property when creating a new player instance, using the HTML5 player in preference, and using the Flash player when it cannot play:
  mounted() {
    const that = this;

    this.player = videojs(
      this.$refs.videoPlayer,
      {
        controls: true.fill: true.autoplay: true.preload: true.techOrder: ['html5'.'flash'],},function onPlayerReady() {
        this.on('canplay', that.handleVideoCanPlay);
        this.on('waiting', that.handleVideoWaiting);
        this.on('play', that.handleVideoStart);
        this.on('pause', that.handleVideoPause);
        this.on('playlistitem', that.handleVideoChange);
        this.on('error'.(err) = >that.handleError(err)); }); }Copy the code
  1. The most important thing is to provide the location of the special SWF file (used to play HLS video) for videoJS-Flash to retrieve

The official CDN link is used here, but it is recommended to deploy this file on your own server

  mounted() {
    const that = this;

    this.player = videojs(
      this.$refs.videoPlayer,
      {
        controls: true.fill: true.autoplay: true.preload: true.techOrder: ['html5'.'flash'].flash: {
          swf: 'https://unpkg.com/@brightcove/videojs-flashls-source-handler/dist/video-js.swf',}},function onPlayerReady() {
        this.on('canplay', that.handleVideoCanPlay);
        this.on('waiting', that.handleVideoWaiting);
        this.on('play', that.handleVideoStart);
        this.on('pause', that.handleVideoPause);
        this.on('playlistitem', that.handleVideoChange);
        this.on('error'.(err) = >that.handleError(err)); }); }Copy the code

This is the end of the code modification, want to see the effect? Don’t forget to download Flash Player, otherwise it won’t play.

Flash Player download

Refresh the page after downloading! Damn it, it still doesn’t work… Only this time with an error:

VIDEOJS: ERROR: (CODE:0 MEDIA_ERR_CUSTOM)  MediaError {type: "FLASHLS_ERR_CROSS_DOMAIN".origin: "flash".message: ""}
Copy the code

To solve the cross domain

I looked up the cause of the problem

Github.com/videojs/vid… www.cnblogs.com/tv151579/p/…

To summarize, the SWF file in our page domain (a.com) will automatically request a crossdomain.xml file in the root directory of the media domain (b.com) to confirm whether the media file can be accessed by the page domain. If the file does not exist or the domain name does not match, a cross-domain error is reported.

Crossdomain.xml configuration rules

With crossDomain.xml configured, deploy it to the media file domain (b.com) root.

When you refresh the play page and see the request processed successfully, the file has been successfully deployed

Up to now, Windows 7 IE11 has been able to successfully play HLS video!! The next step is to give users a prompt to upgrade or download Flash Player

After the