JS笔记-前端拨放m3u8的两种方法

目录

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