hls.js 获取ts文件加动态参数

hls.js 获取ts文件加动态参数

在使用 HLS.js (HLS.js 是一个开源的 JavaScript 库，用于播放 HTTP Live Streaming (HLS) 视频) 来播放带有动态参数的 TS 文件时，你可以通过修改请求的 URL 来加入这些参数。这通常涉及到在视频播放列表（M3U8 文件）中修改 TS 文件的 URL 或者在请求发送之前对请求进行拦截和修改。

方法一：直接修改 M3U8 文件中的 URL

1.  

   生成带参数的 M3U8 文件：

    

    

   在你的服务器端，生成 M3U8 文件时，你可以在引用 TS 文件时添加查询参数。例如，如果你的服务器端脚本（如 PHP, Python, Node.js 等）生成 M3U8 文件，你可以这样修改 TS 文件的 URL：

    

    

    

    

   #EXTINF:10,

   video1.ts?param1=value1&param2=value2

    

    

2.  

   使用 HLS.js 加载修改后的 M3U8 文件：

    

    

    

    

   if (Hls.isSupported()) {

   var video = document.getElementById('video');

   var hls = new Hls();

   hls.loadSource('path/to/your/modified.m3u8');

   hls.attachMedia(video);

   hls.on(Hls.Events.MANIFEST_PARSED,function() {

   video.play();

   });

   }

    

    

方法二：使用 HLS.js 的自定义请求拦截器

如果你不想在服务器端修改 M3U8 文件，你可以使用 HLS.js 的 request 拦截器来动态添加参数。

1.  

   设置请求拦截器：

    

    

    

    

   if (Hls.isSupported()) {

   var hls = new Hls();

   var video = document.getElementById('video');

    

   // 设置请求拦截器

   hls.config.pLoader = (context) => {

   const url = new URL(context.url);

   url.searchParams.append('param1', 'value1');

   url.searchParams.append('param2', 'value2');

   context.url = url.toString();

   return new CustomLoader(context); // CustomLoader 是你自定义的加载器，需要实现 fetch 操作

   };

    

   hls.loadSource('path/to/your/original.m3u8');

   hls.attachMedia(video);

   hls.on(Hls.Events.MANIFEST_PARSED,function() {

   video.play();

   });

   }

    

    

2.  

   自定义加载器 (CustomLoader)：

    

    

   你需要创建一个自定义的加载器来处理 fetch 请求。这通常涉及到扩展 HLS.js 的默认 Loader 类或者使用其他库（如 fetch）来发送请求。例如：

    

    

    

    

   class CustomLoader {

   constructor(context) {

   this.context = context;

   }

    

   fetch(url, options) {

   return fetch(url, options).then(response => {

   if (!response.ok) {

   throw new Error(`Network response not ok: ${response.statusText}`);

   }

   return response;

   });

   }

    

   abort() { /* 实现 abort 方法 */ }

   destroy() { /* 实现 destroy 方法 */ }

   }

    

    

以上方法可以根据你的具体需求选择使用。如果你希望在客户端动态修改请求参数，使用请求拦截器是一个很好的选择。如果你有控制权修改服务器端的 M3U8 文件，直接在文件中添加参数会更加直接和高效。

提示：AI自动生成，仅供参考