background

  • The PC must play videos in M3U8 format and be compatible with Chrome and Internet Explorer 11. Finally use videoJS to realize the video playback, and then my colleague found that IE11 under the Win7 system could not play normally.

  • So I opened station B, played Peppa Pig, and realized it wasn’t that simple! B station unexpectedly in Win7 under IE11 only support flash playback, it seems that Win10 and Win7 under IE11 is not brothers

  • Still, I firmly believe that Plays Anything is an official play Anything. After struggling with the issue on Github and on the official website for a while, I found a solution.

The solution

<! -- Player style --><link href="Video - js. Min7.7.5. CSS" rel="stylesheet" />
    <! -- By default, HLS resolver plugin will come with HLS resolver plugin. You don't need to introduce H5 technology separately.
    <script src="Video. Min7.7.5. Js"></script>
    <! The following two plug-ins are required for Flash playback -->
    <! After this file is introduced, techOrder will be outside of H5, will be registered in Flash technology -->
    <script src="videojs-flash.js"></script>
    <! This plugin is a source processor that integrates flashls with video.js.
    <script src="videojs-flashls-source-handler-bright.js"></script>
    <script>
      // Change SWF file request path in global mode. If flash is used, SWF file request will be loaded
      videojs.options.flash.swf = 'video-js.swf';
    </script>
Copy the code
    // For details about some configuration items, see official
    var options = {
      // poster: 'logo.png ', //
      H5 is executed by default. If videojs-flash.js is introduced, the browser does not support H5 and flash is used by default
      techOrder: ['html5'.'flash'].// Define the preferred sequence of video.js technologies,
      //autoplay: true, // When the player is ready, whether toplay automatically [default false]
      //controls: false, // Whether to display the control bar
      preload: 'auto'./ / preload
      muted: true./ / mute
      language: 'zh-CN'.// Initialize the language
      //fluid: true,
      /*controlBar: {// configure the controlBar timeDivider: false, // durationDisplay: false, // total time progressControl: CustomControlSpacer: true, // Unknown fullscreenToggle: true // fullscreen},*/
    };
Copy the code

Reference file version

  • Video – js 7.7.5
  • Videojs – flash 2.2.1
  • Videojs flashls – source – handler – bright. Js 1.4.8
  • Videojs flashls — SWF 6.4.5

Special remind

  • Ensure that video-js-bright. SWF can be accessed normally
  • Ensure that the videojs-flashls-source-handler-bright.js version is compatible with the video-js-bright. SWF version, otherwise some functional problems may occur, such as the timeline cannot be dragged,
  • The above code needs to run on the server, otherwise it will display playback failure