首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

videojs HLS插件:如何更改xhr uri

videojs HLS插件是一个用于在网页上播放HLS(HTTP Live Streaming)视频的插件。HLS是一种流媒体传输协议,可以将视频分割成小的TS(Transport Stream)片段,并通过HTTP协议进行传输。

要更改videojs HLS插件中的xhr uri,可以按照以下步骤进行操作:

  1. 确保已经在网页中引入了videojs库和videojs HLS插件的相关文件。
  2. 在HTML文件中,找到video标签的相关代码,通常会包含一个id属性和class属性,用于标识视频播放器。
  3. 在JavaScript代码中,找到初始化videojs播放器的部分。通常会使用videojs函数,并传入相关的参数。
  4. 在初始化代码中,找到hls选项,并设置其值为一个对象。该对象包含了一些配置参数,其中包括xhr选项。
  5. 在xhr选项中,找到uri属性,并将其值更改为所需的新的URI地址。URI地址可以是一个指向HLS视频文件的URL。

以下是一个示例代码,展示了如何更改videojs HLS插件中的xhr uri:

代码语言:txt
复制
var player = videojs('my-video', {
  // videojs配置参数
  controls: true,
  autoplay: false,
  preload: 'auto',
  // HLS插件配置参数
  plugins: {
    httpSourceSelector: {
      default: 'auto',
      // xhr选项
      xhr: {
        // 更改uri地址
        uri: 'https://example.com/new-video.m3u8'
      }
    }
  }
});

在上述示例中,将https://example.com/new-video.m3u8作为新的URI地址进行了更改。

请注意,上述示例中的代码仅供参考,具体的代码实现可能会因使用的videojs版本或插件版本而有所不同。建议查阅videojs HLS插件的官方文档或相关文档,以获取更准确的配置和使用方法。

推荐的腾讯云相关产品:腾讯云点播(云点播是腾讯云提供的一站式音视频点播解决方案,支持存储、转码、加密、播放等功能),产品介绍链接地址:https://cloud.tencent.com/product/vod

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

13款用于Web的流行HTML5视频播放器

播放形式上,VideoJS可用于直播和点播,同时支持HLS、DASH、WebM和MP4边下载边播放。在外观样式上,VideoJS可高度自定义,开源社区中有非常多的皮肤可以选用。...Multi-DRM、广告插入、字幕等大多数重要的功能都可以通过插件配置到播放器中。更加完整的VideoJS功能和特性,请参见:https://docs.videojs.com/。...无需任何插件或Flash,它就可以支持HLS和DASH等自适应码率流媒体协议。Shaka通过MSE和EME等开放Web标准播放视频。它支持点播、直播、多时段内容、Multi-DRM、和字幕等功能。...你可以看到很多公司将dash.js作为独立播放器使用,或者作为插件(比如videojs-contrib-dash[2])内置于VideoJS中使用。...你可以经常看到人们将hls.js作为独立播放器使用,或者通过插件VideoJS一起使用(比如videojs-hlsjs[3])。

5.4K20

HLS直播变点播,未按顺序从头播放问题(vidoe.jsvideojs-contrib-hls.js)。

问题描述 可以参考这篇文章,博主遇到的问题跟他类似:HLS实现点播和直播时,M3U8文件的不同; 主要问题就是当m3u8文件没有切片结束时(也就是最后没有#EXT-X-ENDLIST这行代码),直播内容为倒数第三个开始...技术背景 考虑到H5标签对m3u8的兼容性,于是用了video.js 和 videojs-contrib-hls,具体使用可以在我贴出的github连接上找到。...资料查找 翻箱倒柜,终于在谷歌找到了如下描述:gst-plugins-bad: hls: Exclusion of last three fragment in case of live playback...Live Streaming draft-pantos-http-live-streaming-12;MD原来hls协议已经支持,但是我用的videojs-contrib-hls.js插件貌似不支持!...解决办法 最后放弃寻找插件,自己动手丰衣足食,通过在浏览器断点测试的帮助下,在videojs-contrib-hls.js中将 this.tech_.setCurrentTime(seekable.end

32320

html播放rtsp流,浏览器播放rtsp视频流解决方案

而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。 要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些开源的方案。这里的方案都是我尝试过了的,有些成功,有些没成功。...nginx + video,rtsp转rtmp播放 rtmp是adobe开发的协议,一般使用adobe media server 可以方便的搭建起来;随着开源时代的到来,有大神开发了nginx的rtmp插件...更改nginx配置 rtmp{ server{ listen 1935; application live{ live on; record off; } application hls{.../mystream” 复制代码 video 播放 video var player = videojs(‘test_video’, {“autoplay”:true}); player.play();...= videojs(‘my_video_1’, {“autoplay”:true}); player.play(); 复制代码 参考链接 方案四:VLC插件播放 播放步骤 下载安装vlc 浏览器播放

5.7K130

如何开发一款 H5 小程序直播?

video.js:https://github.com/videojs/video.js 是国外比较流行的视频框架,他的特长是做了非常好的自定义ui,符合线上成品的场景,除了自定义ui,还提供了很多插件...video.js可以支持hls也是因为插件是基于hls.js flv.js是B站开源的flv格式的播放器,如果是http-flv协议的直播用它是非常合适的。...在Video.js的插件文档中存在大量的插件,我们可以从中找到自己需要的。...https://videojs.com/plugins/ videojs-contrib-hls是一个支持hls直播的video插件。我们找到cdn, 将js保存到本地。...微信小程序直播 这里讲述的是小程序的直播,默认我这里认为大家是有小程序开发经验的,所以如何创建小程序,安装开发者工具,调试等内容就不说了。

3.5K20

什么是HLS(HTTP Live Streaming)?

HLS播放列表示例 HLS播放列表有两种类型:主清单(master manifest)和子清单(child / media manifest)。让我们通过一个例子来理解它们是如何联系起来的。...后面应该接续相关媒体切片的URI(必须如此)。你应该确保EXTINF的值小于或者等于它所指的媒体文件的实际时长。 HLS的最小切片时长是多少?...使用较短的HLS片段在这种情况下更有意义,因为可以在更短的时间内获得得分片,让播放器有机会对网络条件做出更好的反应。 如何将TS视频打包进HLS格式?...支持HLS的开源播放器包括HLS.js和带有HLS.js插件VideoJS。 以上提到的公司也为iOS/tvOS、Android等提供支持HLS播放的App。...希望你们能够理解HLS协议的工作原理以及使用HLS传输视频时都需要什么。在后续的文章中,我会告诉你如何使用FFmpeg创建HLS视频流,并将其传输到全世界!

2.9K30

前端中的直播

视频直播服务目前常用的包含三种协议(当前时间阿里云的直播推流也是这三种协议),分别是RTML, HLS, (HTTP-)FLV。 下面附上一张知乎上面的推流拉流图 ?...安全性问题 HLS HLS(Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议,直接把流媒体切片成一段段,信息保存到m3u(m3u8)列表文件中, 可以将不同速率的版本切成相应的片...前端做直播 在视频播放方面,前端有一个开源的插件videojs。可以播放HTML5的视频格式以及Flash方面的视频。...但是,在6.X开始的版本后,videojs不在支持flash,需要单独引用videojs-flash插件,或者是使用6.X以下的版本。 重点注意:videojs+flash不支持移动端。.../video-js.swf' + videojs.options.flash.swf = swf 上面的PC的,采用的是RTMP的流 如果是flv的流,react可以使用reflv这个插件

5.5K20

前端中的直播

视频直播服务目前常用的包含三种协议(当前时间阿里云的直播推流也是这三种协议),分别是RTML, HLS, (HTTP-)FLV。...安全性问题 HLS HLS(Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议,直接把流媒体切片成一段段,信息保存到m3u(m3u8)列表文件中, 可以将不同速率的版本切成相应的片...前端做直播 在视频播放方面,前端有一个开源的插件videojs。可以播放HTML5的视频格式以及Flash方面的视频。...但是,在6.X开始的版本后,videojs不在支持flash,需要单独引用videojs-flash插件,或者是使用6.X以下的版本。 重点注意:videojs+flash不支持移动端。.../video-js.swf' + videojs.options.flash.swf = swf 上面的PC的,采用的是RTMP的流 如果是flv的流,react可以使用reflv这个插件

4.8K21
领券