• 前端播放m3u8格式视频

    m3u8是苹果公司推出的视频播放标准，是m3u的一种，只是编码格式采用的是UTF-8。m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

    m3u8格式的视频是将文件分成一小段一小段的ts文件，播放完一个在播放下一个，由于每次请求的ts文件都很小，所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP，移动端主要是HLS，PC端主要是RTMP。

    HLS是苹果推出的，移动端不管是IOS还是Android都天然支持HLS协议，直接在h5页面直接配置即可使用；PC端只有safari浏览器支持，其他浏览器均不支持。

    需要借助hls插件，可以用video.js和videojs-contrib-hls.js。video.js是非常好用的插件

    type:application/x-mpegURL // 告诉videojs,这是一个hls流

    HLS

    转：前端播放m3u8格式视频 - 简书

    Hls.js 使用文档 - 掘金

    GitHub - video-dev/hls.js

    1、使用npm安装hls.js或者外部引入；

    npm install --save hls.js

     <script src="https://cdn.jsdelivr.net/npm/hls.js@1.2.7/dist/hls.js">script>

    2、使用

    1. <template>
    2.   <div class="page">
    3.     <video controls id="video" autoplay="autoplay">
    4.          <source
    5.             type="application/x-mpegURL">
    6.     video>
    7. div>
    8. template>
    9. <script lang="ts">
    10. // import HLS from 'hls.js';
    11. import {defineComponent} from "vue";
    12. var HLS = (window as any).Hls;
    13. let hls = new HLS()
    14. //声明两个变量
    15. export default defineComponent({
    16.   methods: {
    17.     //点击播放
    18.     start(){
    19.       if (HLS.isSupported()) {
    20.         var video = <HTMLVideoElement>document.getElementById('video');
    21.         hls.attachMedia(video);
    22.         hls.loadSource('1.m3u8');
    23.         hls.on(HLS.Events.MANIFEST_PARSED, () => {
    24.           video.play();
    25.           console.log("加载成功");
    26.         });
    27.         hls.on(HLS.Events.ERROR, (event, data) => {
    28.           console.log("加载失败");
    29.         });
    30.       }
    31.     }
    32.   },
    33.   mounted(){
    34.     this.start();
    35.   }
    36. })
    37. script>

    3、接口

    1.     @RequestMapping("/video/{file}")
    2.     public void video( HttpServletResponse response, @PathVariable("file") String file){
    3.         try {
    4.             file = dir + file;
    5.             ServletOutputStream out = response.getOutputStream();
    6.             byte b[] = readFileToByteArray(file); //一开始固定读取1024字节，导致前端解析一直错误，应该是文件多少字节就读取多少字节内容
    7.             out.write(b);
    8.             out.flush();
    9.         } catch (Exception e){
    10.  
    11.         }
    12.     }

    转：Hls.js加载m3u8主流程源码解析 - 知乎

    hls.js库根据功能划分为多个controller，如abr-controller、buffer-controller、stream-controller等，每个controller任务明确，通过事件监听派发的方式完成视频流的拉取、解析、播放等。

    hls.js从初始化到加载m3u8，到选择不同码率加载对应ts文件，再解码ts转为mp4最终在浏览器播放，整个过程非常复杂

     主流程中有两个关键的定时器，第一个为StreamController启动用来轮询ts文件列表是否更新结束；第二个为在ts片加载过程中，用来轮询监听当前ts下载速率以动态调节不同的码率，hls.js初始默认码率为playlist的中间码率，如当前码率列表为360p、480p、720p，则初始默认取480p。

    二、video.js + video.hls.js

    官网：Home | Video.js Documentation

    中文文档：video.js -HTML5 视频播放器

    videojs中文文档详解

    转：前端播放m3u8格式视频 - 十色 - 博客园

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>前端播放m3u8格式视频title>
    6.     
    7.     <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    8.     <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js">script>
    9.     
    10.     <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js">script>
    11. head>
    12. <body>
    13.     <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>    
    14.         <source type="application/x-mpegURL"> //source 标签是设置静态资源的，如果是通过video的api动态设置文件，这标签不需要，不然会有一些问题
    15.     video>
    16. body>
    17. <script>    
    18.     // videojs 简单使用  
    19.     var myVideo = videojs('myVideo',{
    20.         bigPlayButton : true, 
    21.         textTrackDisplay : false, 
    22.         posterImage: false,
    23.         errorDisplay : false,
    24.     })
    25.     myVideo.src([
    26.           {
    27.             src: "视频.m3u8",
    28.             type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
    29.           },
    30.         ]);
    31.     myVideo.play() // 视频播放
    32.     myVideo.pause() // 视频暂停
    33. script>
    34. html>

    或者直接使用video.js，会自动扫video元素加载

    1. html>
    2. <html lang="">
    3.   <head>
    4.     <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    5.     <script src="https://unpkg.com/video.js/dist/video.js">script>
    6.   head>
    7.   <body>
    8.     <video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'> 
    9.       <source src="video.m3u8" type="application/x-mpegURL">
    10.     video>
    11.   body>
    12. html>

  • 相关阅读:
    一文探索【skywalking】如何通过agent实现启动流程
    AI赋能药物研发的偶然与必然
    C_指针基础5
    【单片机】14-I2C通信之EEPROM
    linux档案系统（filessystem）
    性能测试 —— 吞吐量和并发量的关系? 有什么区别?
    SSL证书对于SEO优化的重要性
    电路原理图字母缩写表示什么？
    2023校招4399面试
    Spring Cloud Gateway学习
  • 原文地址：https://blog.csdn.net/qq_30436011/article/details/127918763