Html5如何播放hls格式的视频

最新推荐文章于 2024-07-25 17:20:49 发布
最新推荐文章于 2024-07-25 17:20:49 发布
阅读量1.3k 收藏 12
点赞数 23
文章标签： html5 音视频 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51609337/article/details/139491318
版权

目录

一、什么情况下需要播放

二、hls的原理

1、 切片

2、编码

3、分发

4、M3U8文件

5、客户端请求

6、动态码率调整

7、缓存

8、实时性

三、方法一：使用hls.js播放

 四、方法二：使用video.js播放

一、什么情况下需要播放

当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这里要引用视频播放的js。

一般hls格式的视频有http、https，根据平台提供的接口获取视频url，文件名是m3u8。hls的视频地址示例：

https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8

二、hls的原理

HLS（HTTP Live Streaming）是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠。HLS通过将整个视频分成一系列小的分片，并通过HTTP协议进行传输，从而实现了视频的实时播放和边下边播的功能。

工作原理：

1、 切片

在HLS中，视频被切分成多个小的分片，每个分片通常持续几秒钟。这样做的好处是，可以将视频分片缓存在客户端，从而降低了服务端的压力。

2、编码

在切片之前，视频需要进行编码。常见的编码格式有H.264和H.265等。编码的目的是将视频数据压缩，以便更好地适应网络传输。

3、分发

切片好的视频分发到一个或多个服务器上。这些服务器可以是CDN（内容分发网络）服务器，也可以是普通的HTTP服务器。

4、M3U8文件

服务器会生成一个.m3u8文件，该文件是一个索引文件，包含了所有视频分片的URL。客户端通过下载该文件来获取视频分片的地址。

5、客户端请求

客户端通过HTTP请求.m3u8文件，并从中获取到视频分片的地址。然后，客户端会根据这些地址逐个请求视频分片。

6、动态码率调整

HLS支持动态码率调整，这意味着客户端可以根据当前网络情况选择合适的视频分片进行播放。如果网络带宽足够，客户端可以选择高质量的分片进行播放；如果网络带宽不足，客户端可以选择低质量的分片进行播放。

7、缓存

客户端会将下载的视频分片进行缓存，以便实现边下边播的功能。当用户播放视频时，客户端会从缓存中读取视频数据进行播放。

8、实时性

由于视频被切分成多个小的分片，客户端可以实时地获取最新的视频分片。这意味着，即使视频在服务端还没有完全生成，客户端也可以开始播放已经生成的分片。

三、方法一：使用hls.js播放

需要引用hls.js

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

全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<video id="HLS_Player" autoplay="autoplay" loop muted controls="controls" width="100%" height="100%"></video>
<script type="text/javascript" >
    HLS_Player = document.getElementById('HLS_Player');
    if (Hls.isSupported()) {
        HLS_Controller = new Hls();
        HLS_Controller.loadSource("https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8")
        HLS_Controller.attachMedia(HLS_Player);
        HLS_Controller.on(Hls.Events.MANIFEST_PARSED, function() {
            HLS_Player.play();
        });
    } else if (HLS_Player.canPlayType('application/vnd.apple.mpegurl')) {
        HLS_Player.src = '';
        HLS_Player.addEventListener('loadedmetadata', function() {
            HLS_Player.play();
        });
    }
</script>
</body>
</html>

运行结果：

 由于hls是对视频进行切片，所以隔几秒hls.js里就会对url进行一次请求。

 四、方法二：使用video.js播放

需要引用一下js和css文件.

<script src="https://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<link href="https://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">
<!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>

全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <script src="https://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
    <link href="https://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
</head>
<body>
<div class="video" style="width: 100%;height: 60vh">
    <video id="example-video" class="video-js vjs-default-skin  vjs-big-play-centered"  style="width: 100%;height: 100%" 
           playsinline webkit-playsinline
           autoplay controls preload="auto"
           x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
        <source id="hls-source" src="">
    </video>
</div>
<script type="text/javascript" >
    var player = window.player = videojs('example-video');
    player.src({
        src:'https://cdn.jsdelivr.net/gh/skyxingcheng/ic-cdn@master/static/media/TheWindRises_mv/210314.m3u8',
        type: 'application/x-mpegURL'
    });
    player.play();

</script>
</body>
</html>

运行结果：

 运行的视频不自动播放，且报错，需要手动点击才能播放。

原因是网页加载完成后立即播放音频（或带有音频轨道的视频）可能会意外地打扰到用户，为了增加用户体验，紧接着2018年4月份Chrome发布的66版本也正式关闭了声音自动播放。

解决方案：

一：设置静音

audio的muted设置为true，让用户自己点击查看

 代码中这样改：

    <video id="example-video" class="video-js vjs-default-skin  vjs-big-play-centered"  style="width: 100%;height: 100%" muted
           playsinline webkit-playsinline
           autoplay controls preload="auto"
           x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-typ="h5">
        <source id="hls-source" src="">
    </video>

二、用户和网页已有交互行为（包括点击、触摸、按下某个键等等）

我这里是改成静音了，运行结果：

林小白的日常
关注
  • 23
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页播放hls直播流
u014196765的博客
01-26 847
要在网页中嵌入HLS（HTTP Live Streaming）直播流，你可以使用HTML5的标签结合JavaScript库，如Hls.js。Hls.js是一个流行的开源库，它可以让你在不支持HLS的浏览器中播放HLS流，比如在不支持HLS的桌面浏览器中。以下是一个简单的例子，展示了如何使用Hls.js在网页中嵌入HLS直播流：首先，确保你的网页中包含了Hls.js库。请确保将你的HLS流地址.m3u8替换为你的实际HLS流地址。这段代码首先检查浏览器是否支持Hls.js。
HTML hls视频流播放
m0_62285976的博客
04-28 508
上方是多个监控，如果只有一个的话，直接把路径放到<source>标签里的src中即可。太多发不了，自己去搜吧。
海康摄像头HLS视频播放示例
01-31
内含视频服务器图文设置，以及html示例。浏览器上实现播放hls视频
H5视频播放工具hls.js
12-29
无需插件，支持播m3u8视频流，IE11 IE8 chrome浏览器都支持
web前端HTML播放HLS在线视频流（m3u8）
热门推荐
Evil_0_0_0的博客
04-26 2万+
最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：https://www.jianshu.com/p/8845b976fcaf 先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。 开始正题： 1、一个插件hls....
Html5 播放Hls格式视频
weixin_30477797的博客
02-07 630
二群号为766718184 ，博主提供Ffmpeg、GB28181视频教程 播放地址： http://www.iqiyi.com/u/1426749687 移动端Html5支持Hls格式视频播放，创建一个新的文件命名为VideoPlayerDemo-Html5.html打开 该文件写入如下内容，保存文件将该文件放到移动端（例如Android手机）直接打开可观看视频， 如图1所示。 &l...
HTML5播放HLS码流视频
skyxc233的博客
03-15 916
本文同步于个人博客 ： 蝴蝶飞不过沧海 | Blog 本文链接 <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> <video id="video"></video> <script> if(Hls.isSupported()) { var video = document.getElementById('video'); var
开发类 - HTML5 播放 hls 流媒体视频
milkbrother的博客
01-09 1268
1.资源下载：https://pan.baidu.com/s/1IZ4HKhNg08cbmDBl4FGYJg 2.本机地址：http://127.0.0.1:8888/hls/home.m3u8 3.说明： 经测试，在最新版的 Android webview 中不用任何插件，可以直接播放 经测试，在windows10自带的Edge浏览器 可直接播放，PC端 safari浏览...
HTML5点播m3u8(hls)格式视频
chenzhao635的专栏
02-24 680
效果案例显示 这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力(按需加载)。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同...
html采用video播放hls视频流
10-13
1、本文详细描述了html采用video播放hls视频流的方法及源代码。 2、通过详细示例，让读者更直观地阅读，更清晰的理解。 3、示例代码可直接复制，编译后可直接运行。 4、根据示例以及运行结果，让读者加强记忆及...
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
在提供的压缩包中，`index.html`可能是基础的HTML5视频播放器示例，`本地媒体映射播放直播m3u8(hls)格式视频播放器.html`则可能包含了一个使用HLS.js播放本地或网络M3u8直播流的更复杂示例。`css`和`js`文件夹可能...
视频流播放hls格式demo.zip
08-09
本示例"视频流播放hls格式demo.zip"着重于前端如何处理RTSP（Real-Time Streaming Protocol）格式的视频流并将其转化为适应性更强的HLS格式进行播放。 首先，我们需要了解RTSP和HLS的基本概念。RTSP是一种应用层...
直播web html5 hls播放,PC端播放rtmp和hls视频流
weixin_35669712的博客
06-01 1026
本文将会介绍如何在网页端上实现直播的播放。hls播放videojs如果我们要让我们的网页支持在所有浏览器上播放，我们就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。下面是一个播放的例子。你可以将source标签下的src换成你自己的直播流地址。需要注意的是rtmp流的type是rtmp/flv(flv 跟推流的时候FFm...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1645
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
美摄科技企业级视频拍摄与编辑SDK解决方案
美摄科技
07-24 466
美摄科技的视频拍摄与编辑SDK，采用行业领先的非编架构，不仅支持高达8K的超高清视频录制与编辑，更率先融入HDR（高动态范围）技术，让每一帧画面都细腻入微，色彩层次丰富，为企业打造影院级的视觉享受。在视觉为王的时代，美摄科技以专业级的技术实力与前瞻性的创新理念，为企业视频创作提供了强有力的支持。让我们一起，用视觉的力量，讲述企业故事，传递品牌价值，共创美好未来！除了强大的特技与关键帧功能外，美摄SDK还提供了曲线编辑工具，让用户能够像专业调色师一样，对视频的亮度、对比度、饱和度等参数进行精细调节。
【音视频之SDL2】bmp图片与绘制bmp
最新发布
m0_62599305的博客
07-25 1073
在现代多媒体应用中，图像的处理和显示是非常重要的一部分。无论是在游戏开发还是在视频处理软件中，图像显示都是不可或缺的功能。本文将介绍如何使用SDL2库来绘制BMP图像，包括BMP的基本概念、SDL2绘制BMP的原理和具体的绘制流程。本文介绍了如何使用SDL2库来绘制BMP图像，包括BMP格式的基本概念、SDL2绘制BMP的原理和具体流程。通过SDL2，我们可以方便地将BMP图像加载到内存中并绘制到窗口表面，实现图像的显示功能。希望本文能够帮助你更好地理解和使用SDL2进行图像处理。
python-爬虫实例（4）：获取b站的章若楠的视频
纸上得来终觉浅
07-22 8474
章若楠赛高！！！
hls 格式播放 js 实例
07-19
### 回答1： HLS（HTTP Live Streaming）是一种用于在不同设备和网络条件下进行流式传输的协议。它将视频文件分成一系列小的可下载和播放的块，使得视频可以根据设备和网络条件进行自适应调整。而在播放HLS格式的视频时，可以使用JavaScript来控制和处理播放操作。 在实现HLS格式播放的JavaScript示例中，首先需要引入相关的库或者框架，如video.js、hls.js等，这些库可以帮助我们处理HLS格式的视频。 接着，在HTML文件中，我们可以创建一个`<video>`标签来展示视频内容，并给它一个唯一的`id`用于JavaScript获取和控制。 在JavaScript代码中，可以使用`document.getElementById()`方法通过`id`获取到`<video>`标签元素，并创建一个`Hls`对象来处理HLS视频格式。然后，设置一些视频相关的属性，比如自动播放、控制条等。 接下来，使用`Hls.loadSource()`方法加载HLS视频的URL，并通过`Hls.attachMedia()`方法将其和`<video>`标签进行关联。 最后，使用一些事件监听的方式来监控视频的播放状态，如`on('play')`、`on('pause')`等，以及一些控制方法，如`play()`、`pause()`、`seek()`等，来控制视频的播放和操作。 示例代码如下： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HLS格式播放示例</title> <script src="video.js"></script> <script src="hls.js"></script> </head> <body> <video id="my-video" controls autoplay></video> <script> var video = document.getElementById('my-video'); var hls = new Hls(); if(Hls.isSupported()) { hls.loadSource('video-url.m3u8'); hls.attachMedia(video); video.addEventListener('play', function() { console.log('视频开始播放'); }); video.addEventListener('pause', function() { console.log('视频暂停'); }); video.addEventListener('seeked', function() { console.log('视频跳转播放'); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'video-url.m3u8'; } </script> </body> </html> ``` 以上是HLS格式播放的一个简单示例，通过以上代码，我们就可以在网页中使用JavaScript来播放HLS格式的视频了。当然，根据具体的需求和业务场景，还可以进行更多的定制和功能扩展。 ### 回答2： 要播放 HLS 格式的视频，我们可以使用 JavaScript 来实现。以下是一个使用 JavaScript 播放 HLS 格式的示例： 首先，我们需要引入播放器库，常用的有 video.js 和 hls.js。我们可以使用 `<script>` 标签将这些库引入到 HTML 页面中。例如： ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> ``` 接下来，在 HTML 页面中创建一个 `<video>` 标签，并给予它一个唯一的 ID，用于在 JavaScript 中进行操作。例如： ```html <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="/path/to/hls/video.m3u8" type="application/x-mpegURL"> </video> ``` 然后，在 JavaScript 中，我们使用`videojs`函数初始化播放器，并为其设置一些配置，例如： ```html <script> var player = videojs('my-video', { html5: { hls: { overrideNative: true // 使用 JS 实现播放 HLS } } }); </script> ``` 最后，我们需要使用 hls.js 加载并播放 HLS 视频流。我们在播放器初始化之后，监听播放器的 ready 事件，然后通过 hls.js 加载视频流。例如： ```html <script> player.ready(function() { var videoSrc = player.src(); if (videoSrc.includes('.m3u8')) { var hls = player.tech().hls; hls.loadSource(videoSrc); hls.on(Hls.Events.MANIFEST_PARSED, function() { player.play(); }); } }); </script> ``` 通过以上步骤，我们就可以使用 JavaScript 来播放 HLS 格式的视频了。这个示例使用了 video.js 和 hls.js，你可以根据需要调整相关库和配置。 ### 回答3： HLS（HTTP Live Streaming）是一种流媒体传输协议，可用于在网络上实时传输音视频内容，适用于各种平台和设备。在使用HLS格式播放时，我们可以使用JavaScript编写一个播放器的实例。 首先，我们需要一个HTML页面作为播放器的容器。在HTML文件中，我们可以使用video元素来嵌入HLS视频流。例如： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HLS 播放器</title> </head> <body> <video id="hlsPlayer" autoplay controls></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script> var video = document.getElementById('hlsPlayer'); if (Hls.isSupported()) { var hls = new Hls(); hls.loadSource('path/to/hls/stream.m3u8'); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'path/to/hls/stream.m3u8'; } </script> </body> </html> ``` 在上面的示例中，我们首先在`<head>`标签中包含了HLS.js库的链接，用于支持HLS播放。在`<video>`标签中，我们设置了id属性为"hlsPlayer"，并指定了`autoplay`和`controls`属性，使视频自动播放和显示控制面板。 在JavaScript部分，我们使用`document.getElementById`方法获取到video元素，并创建一个Hls实例。如果浏览器支持HLS，我们加载HLS流源并将其附加到video元素上。如果浏览器支持苹果的HTTP Live Streaming格式，则直接将HLS流源赋值给video的src属性。 通过以上的方式，我们可以在网页中使用HLS格式进行视频播放，提供更好的用户体验，并且兼容多种平台设备。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值