目錄

JS筆記-幫元素加上style的寫法

JS筆記-getPosition 讓你找到元素x,y位置

js筆記--寫腳本需要用到的waitForKeyElements.js

JS筆記-設定CSSstyle的function

JS筆記-使用fetch下載檔案/download.js好用的東西

JS筆記-前端新手練習小專案（附加4個JS實例網站可學）

JS筆記-關掉alert的簡單小技巧

JS筆記-使用ajax傳送表單(ex.傳送google表單)

JS筆記-前端撥放m3u8的兩種方法

JS筆記-讓chrome跳過「允許下載多個檔案」的技巧

JS筆記-製作copy效果

JS筆記-暫時讓網頁可以編輯

JS筆記-VScode自己設定速打

JS筆記-VScode的Prettier(自動排版)怎麼開始使用？

前情提要

先讓我們看一段
前端影片與直播筆記系列 第 6 篇
SimonAllen大大在「Day06 HLS 直播協議簡介」寫的介紹：

HLS 全名 HTTP Live Streaming ，是由蘋果提出的媒體傳輸協議，看到 HTTP 一詞，就知道這個協議是走HTTP協定的。HLS的影片不一定要是直播影片，也可以是非直播 (具有明確片長、完整的影片)，其核心是 .m3u8 與 .ts 這兩個檔案，與其說 m3u8 是個影片檔案，倒不如說， .m3u8 只是個文件，這個文件記錄了影片檔的位置與其設定。

hls串流 m3u8這個觀念
我大概搜尋一百次都不懂 看這段文字一次就搞懂了 以前只知道就是沒辦法直接下載
現在了解因為他是好幾個檔案(ts)組合的串流影音(m3u8)
而不是一般搜尋mp4就可以下載的東西

那麼要怎麼用JS撥放 這裡我提供兩種方法 第一個是hls.js
https://github.com/video-dev/hls.js/

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
  //
  // First check for native browser HLS support
  //
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    //
    // If no native HLS support, check if HLS.js is supported
    //
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
</script>

第二個方法是type='application/x-mpegURL' 的解析概念
用Jquery寫的話長下面這樣

$(document).ready(function() {
  $("#btn").on("click", function() {
    $("#video").html("<source src='"+ $("#url").val() +"' type='application/x-mpegURL'>");
    var ply = videojs("video");
    ply.play();
  });
});

想看實際範例用法
可以去WGenial大大的codepen觀看:

https://codepen.io/wgenial/pen/pRRjoY