☰

.M3U8 HLS support for HTML5 video

Lets you play fragmented Apple-style adaptive videos in browsers like Firefox, by making use of Media Source Extensions. No Flash needed.

  1. // ==UserScript==
  2. // @name        .M3U8 HLS support for HTML5 video
  3. // @namespace   https://greasyfork.org/users/4813-swyter
  4. // @description Lets you play fragmented Apple-style adaptive videos in browsers like Firefox, by making use of Media Source Extensions. No Flash needed.
  5. // @include     *
  6. // @version     1
  7. // @require     https://cdn.jsdelivr.net/hls.js/latest/hls.min.js
  8. // @grant       none
  9. // @run-at      document-start
  10. // ==/UserScript==
  11.  
  12. /* makes use of DailyMotion's MSE-based HLS client:
  13.    https://github.com/dailymotion/hls.js */
  14.  
  15. /* example page: http://walterebert.com/playground/video/hls/*/
  16.  
  17. /* wait until the page is ready for the code snipped to run */
  18. document.addEventListener('DOMContentLoaded', function()
  19. {
  20.   var hls_elements = document.querySelectorAll(`video[src*='.m3u8'], video > source[src*='.m3u8']`);
  21.  
  22.   if (hls_elements.length === 0 || !Hls || !Hls.isSupported())
  23.    return;
  24.  
  25.   console.log(`[i] enabling M3U8 HLS shim user script on this page.`);
  26.  
  27.   for(i of hls_elements)
  28.   {
  29.     var video_elem = i.localName.toLowerCase() == "source" && i.parentElement || i;
  30.     
  31.     /* if the element is not visible, in typical JS kludge syntax */
  32.     if (`offsetParent` in video_elem && video_elem.offsetParent === null)
  33.       continue;
  34.     
  35.     console.log(i, i.src, video_elem);
  36.     
  37.     var hls = new Hls();
  38.  
  39.     /* get the original source + get the video element and attach the HLS.js script to it */
  40.     hls.loadSource(i.src);
  41.     hls.attachMedia(video_elem);
  42.   }
  43. }, false);