开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在浏览器端通过videojs contrib-hls向m3u8清单触发的请求添加参数

在浏览器端通过videojs contrib-hls向m3u8清单触发的请求添加参数，可以通过以下步骤实现：

首先，确保已经引入了video.js和videojs-contrib-hls插件。可以通过以下方式在HTML文件中引入：

<link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.0/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@7.1.0/dist/videojs-contrib-hls.min.js"></script>

创建一个video标签，并为其添加一个唯一的ID，以便在JavaScript中进行操作。例如：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
  <source src="path/to/your/video.m3u8" type="application/x-mpegURL">
</video>

在JavaScript中，使用video.js初始化视频播放器，并为其添加contrib-hls插件。然后，通过videojs的hls.xhr.beforeRequest事件来修改请求URL，添加参数。例如：

var player = videojs('my-video');
player.hls({
  withCredentials: true
});

player.ready(function() {
  player.on('hls.xhr.beforeRequest', function(options) {
    // 添加参数到请求URL中
    options.uri += '?your_parameter=your_value';
  });
});

在上述代码中，your_parameter是你要添加的参数名，your_value是对应的参数值。

最后，通过调用player.play()方法来开始播放视频。完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.15.0/video.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@7.1.0/dist/videojs-contrib-hls.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
    <source src="path/to/your/video.m3u8" type="application/x-mpegURL">
  </video>

  <script>
    var player = videojs('my-video');
    player.hls({
      withCredentials: true
    });

    player.ready(function() {
      player.on('hls.xhr.beforeRequest', function(options) {
        // 添加参数到请求URL中
        options.uri += '?your_parameter=your_value';
      });
    });

    player.play();
  </script>
</body>
</html>

这样，当视频播放器加载m3u8清单时，会自动在请求URL中添加指定的参数。请注意，这只是一个示例，你可以根据实际需求修改参数名和值。

推荐的腾讯云相关产品：腾讯云点播（云点播是腾讯云提供的一站式音视频点播解决方案，支持存储、转码、加密、播放等功能，适用于各种场景的音视频应用。）。

腾讯云点播产品介绍链接地址：腾讯云点播

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

rtmp、m3u8直播小记

最近项目做跟视频有关的，一个是直播，一个是播放视频。使用video标签。视频直播有很多协议，rtmp、rtsp、hls等就自己去了解，业务有做到就会了解一些。

03

HTML5点播m3u8(hls)格式视频

这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。

04

ubuntu搭建推流服务器Nginx+rtmp

****前言**** 最近这两年直播平台及其流行，然而我呢？也要玩玩推流服务器～～～实现服务器推流/PC客户端观看/浏览器客户端查看 ---- ****简介**** 对于Nginx的优点呢就不多说了，两句话： 1)并发量高 2)可负载均衡重点谈谈rtmp吧！ RTMP全称是Real Time Messaging Protocol（实时消息传输协议），rmtp是一种通讯协议。该协议基于TCP，是一个协议族，包括RTMP基本协议及RTMPT/RTMPS/RTMPE等多种变种。RTMP是一种

02

开源流媒体服务器SRS学习笔记(2) - rtmp / http-flv / hls 协议配置及跨域问题

对rtmp/http-flv/hls这三种协议不熟悉的同学，强烈建议先看看网友写的这篇文章科普下：理解RTMP、HttpFlv和HLS的正确姿势。

05

快速学习-视频播放器解决方案

视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或浏览器插件播放器，其中以flash和H5播放器最常见。

01

video.js解析m3u8在线播放

流媒体服务器： wowza 流媒体格式： m3u8 播放端：移动端网页（Android、IOS）播放工具： video.js 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>videojs-contrib-hls embed</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script

03

HTML 5 视频直播一站式扫盲

视频直播这么火，再不学就 out 了。为了紧跟潮流，本文将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但不限于前端技术。 1. H5 到底能不能做视频直播？当然可以， H5 火了这么久，涵盖了各个方面的技术。对于视频录制，可以使用强大的 webRTC（Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，缺点是只在 PC 的 chrome 上支持较好，移动端支持不太理想。对于视频播放，可以使用 HLS(HTTP Live Stream

07

集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决

EasyPlayer几乎涵盖了开发者所需的全部平台，尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题，比如：不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等。EasyPlayer.js，极大地方便了开发者在解决B/S型业务开发，集 rtmp，hls，flv，websocket 于一身的网页直播/点播播放器。

01

video.js支持m3u8格式直播

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. v

vue使用video.js解决m3u8视频播放格式

今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题

01

前端中的直播

因为公司是做在线抓娃娃的，涉及到直播推流这一部分的工作。之前一直都是在App上面进行游戏，所以关于直播这一部分也是与安卓与IOS有关，与前端是没有关系的。但是现在新的需求就是要求这个在线抓娃娃要能够在网页上面进行游戏。所以，我的事情来了。对于没有涉及到前端音视频的这部分的需求，所以初入这一行，还是有点马马虎虎，花了一周多的时间终于是弄明白了。

02

前端中的直播

因为公司是做在线抓娃娃的，涉及到直播推流这一部分的工作。之前一直都是在App上面进行游戏，所以关于直播这一部分也是与安卓与IOS有关，与前端是没有关系的。但是现在新的需求就是要求这个在线抓娃娃要能够在网页上面进行游戏。所以，我的事情来了。对于没有涉及到前端音视频的这部分的需求，所以初入这一行，还是有点马马虎虎，花了一周多的时间终于是弄明白了。

02

EasyNVR纯H5摄像机直播解决方案前端解析之：RTSP安防监控实时直播的网页H5自动播放方案

我们很多安防、互联网、直播的应用场景中，在打开一路直播流后，极少看到需要点击播放按钮才能直播播放视频流的情况，但是由于H5场景的播放需要兼容的浏览器非常多，这样的情况下经常会遇到各种各样的摄像机网页播放的问题，比如这里解析的视频流自动播放的问题：

02

如何使用视频流媒体服务器支持HTML5直播？

视频直播这么火，再不学就out了！为了紧跟潮流，本文我也将向大家介绍一下视频直播中的基本流程和主要的技术点，包括但仅不限于前端技术。

01

EasyNVR、EasyDSS二次开发---RTMP、HLS流在web页面进行无插件播放（demo）

对于EasyNVR和EasyDSS的使用方式大概分为两大类，一类是直接将软件作为视频能力平台来进行使用；另一类就是将视频能力集成到自身的业务系统来，这就涉及到相关的接口调用和一些对应的功能的集成。对与前端的web播放器的集成也是一个需要注意的方向；通常也有很多客户会咨询到关于web播放器集成的相关问题，本篇博客也是对应web流媒体播放器的demo介绍。

01

tcplayer 源码改造第一弹 -> 自定义加密

在代码中定位videoSource,可定位到如下相似代码,下面的代码中加注释的即为笔者新增的参数

03

搭建直播教学系统的方法

当下，视频直播行业在中国逐渐走红。从游戏到秀场，从传统的网页端到移动互联网，各大直播平台包括斗鱼、熊猫tv、虎牙战旗还有纯移动端的印客、易直播等，群雄割据。言归正转，毕竟本文是一篇技术博客，接下来让我们从技术的角度分析如何搭建一个自己的直播教学系统。

03

流媒体加密

付费观看视频的模式是很多平台的核心业务，如果视频被录制并非法传播，付费业务将受到严重威胁。因此对视频服务进行加密的技术变得尤为重要。

03

流媒体加密

关于h5直播源码的技术扫盲

到目前，h5似乎已经成为品牌宣传最重要的表现方式。h5技术开发简单，研发周期短，且成本低廉。尤其强化了web网页的表现性能，通过h5技术搭建的直播系统不仅能够在网页实现高清流畅播放，还能加入很多的交互功能。下面，我们就针对h5直播源码做一些技术扫盲。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭