利用hls插件播放m3u8格式视频

最新推荐文章于 2024-05-06 21:42:11 发布
最新推荐文章于 2024-05-06 21:42:11 发布
阅读量468 收藏
点赞数
分类专栏： javascript 文章标签： 音视频 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011649691/article/details/128544353
版权 
<!DOCTYPE html>
<html>
<head>
  <title>My Video Player</title>
  <script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
</head>
<body>  
  <video id="video" muted=“muted” controls="controls" autoplay = "autoplay"></video>
  <script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
</script>
</body>
</html>

xiaoniuxqq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HLS和M3U8
odelia的博客
04-18 2594
HLS （Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段ts文件，通过m3u8索引文件按序访问ts文件，客户端不停的从服务器获取文件,实现播放音视频的功能。 优势： 可以在不同速率的版本间自由切换，实现无缝播放 省去使用其他协议的烦恼 劣势: 延迟大小受切片大小影响，不适合直播，适合视频点播。 实时性差，延迟高。HLS 的延迟基本在 10s+ 以上 文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓
使用jmeter的HLS插件进行流媒体的压力测试
weixin_42343146的博客
10-13 3110
国标测试中，进行视频流压力测试的方法，使用jmeter'中HLS插件进行压力测试。
HLS播放器+ckplayer播放插件
01-03
ckplayer播放插件
性能工具之Jmeter HLS 插件（入门篇）
Mo小泽的技术博客
12-18 2328
文章目录HLS 插件介绍HLS 插件安装HLS 插件外观创建测试HLS 插件配置主播放列表网址持续时间音频和字幕轨道带宽解析度恢复视频下载 HLS 插件介绍 HLS 插件安装 从插件管理器安装 HLS 插件。 插件管理器地址：https://jmeter-plugins.org/wiki/PluginsManager/ 安装插件后，JMeter 会自动重启。 HLS 插件外观 该插件内部解决了 HLS 的复杂性。它获取主播放列表文件，选择一个变体，并获取其媒体播放列表文件，片段等。该插件可模拟用户通
2024年前端最全vue3兼容flv和m3u8的插件(hls(1)，软件开发前端培训
最新发布
2401_84411072的博客
05-06 561
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式。
jmeter之HLS插件进行流媒体压测
嘘！别说话！
04-28 483
最近项目，需要进行视频流的压力测试，查阅多方资源，得知使用jmeter中的HLS Plugins可以进行压力测试，下面是我在操作过程中的记录：
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
要播放M3U8格式的视频，我们可以在`<source>`标签中指定M3U8文件的URL，如下所示： ```html <source src="path_to_your_m3u8_file.m3u8" type="application/x-mpegurl"> Your browser does not support the ...
海康视频在线播放m3u8及调试工具.zip
07-02
这个工具专为处理m3u8格式的视频流设计，这是一种基于HTTP Live Streaming (HLS) 的流媒体协议，广泛应用于网络视频传输。 m3u8是苹果公司提出的一种媒体播放列表文件格式，主要用于分段传输大文件，尤其是高清视频...
流视频下载合并插件Free m3u8 Video Downloader
12-13
流视频下载合并插件Free m3u8 Video Downloader是一款专为互联网用户设计的强大工具，...通过理解流视频技术，m3u8、flv和mp4等格式的特点，以及如何使用这款插件，用户可以更有效地利用网络资源，享受便捷的数字生活。
vue通过video.js解决m3u8视频播放格式的方法
12-10
今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。...
m3u8文件视频播放（ckplayer）完整代码
09-05
"m3u8文件视频播放（ckplayer）完整代码"这个标题表明我们将讨论如何使用CKPlayer这款JavaScript播放器来播放M3U8格式的视频。CKPlayer是一款功能强大的网页视频播放器，支持多种视频格式和流媒体协议。在描述中提到...
HLS播放资源
09-26
当浏览器不支持HTML5，并且不支持播放m3u8格式的视频，通过引入该播放器即可进行播放，使用文档可以参考http://www.jianshu.com/p/d9b64514f8cc
探索先进的视频播放解决方案：Video.js HLS 插件
gitblog_00086的博客
04-04 674
探索先进的视频播放解决方案：Video.js HLS 插件 项目地址:https://gitcode.com/saysmy/videojs-hls Video.js 是一个流行的开源 HTML5 和 Flash 视频播放器，它提供了一套优雅的界面和丰富的自定义选项。在现代Web开发中，随着HLS（HTTP Live Streaming）的普及，我们常常需要在网页上支持流媒体播放。这就是 Video...
IOS H5页面中 HLS视频无法正常播放，使用hls.插件
w1404273025的博客
04-15 1460
IOS H5页面中 HLS视频无法正常播放，使用hls.插件
论如何写出一篇高质量的英文论文_英文论文怎么写博客
2401_84435866的博客
05-04 417
*JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。t基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串。
vue-video-player播放hls视频流
renkai721的专栏
01-06 1665
vue-video-player播放hls视频流,vue接入海康摄像头视频
360极速浏览器不能添加hls插件，怎样播放m3u8视频？
一往无前的博客
07-15 5988
谷歌和火狐浏览器都可以在扩展程序添加Native HLS Playback插件播放m3u8视频，但是360搜了一下没有类似的插件。 那怎么办呢，有个好办法就是大家可以简单粗暴直接换成Chrome浏览器，但是好多对于很多用惯了360极速浏览器的小伙伴来说这不可能!!! 360极速浏览器用的也是Chrome的内核，应该也是支持该插件的，所以这边我把Chrome中的m3u8播放插件打包了一份放在百度网盘上，大家可以下载下来 链接：https://pan.baidu.com/s/1yY_BdokI3BK_NLy3
前端使用hls插件播放监控视频流
qq_54413072的博客
02-28 385
hls
hls实现播放m3u8视频&将视频流进行切片& HLS.js简介
sunwanfulove的博客
12-01 3002
HLS 协议本身实现了码率自适应,在不同带宽情况下,设备可以自动切换到最适合自己码率的视频播放1.跨平台性：支持iOS/Android/浏览器，通用性强。穿墙能力强：由于HLS是基于HTTP协议的，因此HTTP数据能够穿透的防火墙或者代理服务器HLS都可以做到，基本不会遇到被防火墙屏蔽的情况。切换码率快（清晰度）：自带多码率自适应，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。客户端可以很快的选择和切换码率，以适应不同带宽条件下的播放。
西瓜视频播放器xgplayer如何播放m3u8格式视频
06-02
要使用xgplayer播放m3u8格式视频，需要在引入xgplayer的js文件后，引入hls.js或者m3u8-parser.js这两个插件中的一个，具体的步骤如下： 1. 在html文件中引入xgplayer的js和css文件。 ```html <link rel="stylesheet" href="path/to/xgplayer.css"> <script src="path/to/xgplayer.js"></script> ``` 2. 在js文件中创建xgplayer实例，并在options中设置type为'hls'或'm3u8'。 ```javascript const player = new Player({ id: 'xgplayer', url: 'path/to/video.m3u8', type: 'hls', autoplay: true, controls: true }) ``` 3. 在js文件中引入hls.js或m3u8-parser.js插件。 ```javascript import Hls from 'path/to/hls.js' ``` 或者 ```javascript import M3U8Parser from 'path/to/m3u8-parser.js' ``` 4. 在xgplayer实例中设置hlsConfig或m3u8Config。 ```javascript player.hlsConfig = { xhrSetup: function(xhr, url) { xhr.withCredentials = true } } ``` 或者 ```javascript player.m3u8Config = { withCredentials: true } ``` 注意：以上的示例中，url为m3u8格式的视频地址。如果需要播放其他格式的视频，如mp4等，可以将type设置为'normal'或者'video'，并设置url为对应的视频地址。 希望这能够解决你的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值