html5中使用video.js播放器播放m3u8直播文件

最新推荐文章于 2024-06-06 10:37:10 发布
最新推荐文章于 2024-06-06 10:37:10 发布
阅读量4.4k 收藏 12
点赞数
分类专栏： Html Jquery Javascript 文章标签： javascript html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/122133693
版权
Html 同时被 3 个专栏收录
248 篇文章 8 订阅
订阅专栏
Javascript
231 篇文章 5 订阅
订阅专栏
Jquery
188 篇文章 1 订阅
订阅专栏

html5中使用video.js播放器播放m3u8直播文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
    <!--
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript">
    </script>
    -->
    <!-- videojs-contrib-hls
     用于在电脑端播放 如果只需手机播放可以不引入 
     -->
</head>
<body>
<style>
    .video-js .vjs-tech {position: relative !important;}
</style>
<div>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls  autoplay  data-setup='{}' style='width: 100%;height: auto'>
        <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
    </video>
</div>
<div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>

<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
    }
    var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
    })
</script>
徊忆羽菲
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【HTML5播放器】DPlayer播放器使用指引（支持m3u8等多格式）
XiaoqiangClub的博客
02-20 9506
文章目录DPlayer DPlayer Github项目地址 官方说明文档 镜像引用地址 参考示例代码 更多内容
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（ios亲测有效）
钟长森的博客
11-30 6040
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>正在直播中</title> <script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script> <script src="http://.
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）
11-30
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效） 。
Html5如何播放hls格式的视频
最新发布
weixin_51609337的博客
06-06 1263
HLS（HTTP Live Streaming）是一种基于HTTP协议的流媒体传输协议，它的出现使得视频的传输更加稳定和可靠。HLS通过将整个视频分成一系列小的分片，并通过HTTP协议进行传输，从而实现了视频的实时播放和边下边播的功能。由于视频被切分成多个小的分片，客户端可以实时地获取最新的视频分片。这样做的好处是，可以将视频分片缓存在客户端，从而降低了服务端的压力。当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这里要引用视频播放的js。
html播放hls
枯树无花
12-29 1233
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo</title> <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> </head> <body> &l..
m3u8 videojs 倍速播放属性
t0m的专栏
02-10 7010
var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, playbackRates: [0.5,1,1.5,2,3], #...
网页前端(Html)video播放m3u8(HLS)&Vue使用video.js播放m3u8
qq_43842093的博客
04-04 1万+
网页前端(Html)video播放m3u8(HLS) HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。 开源JS库（Github）： 【video.js】https://github.com/videojs/videojs-contrib-hls 【hls.js】https://github.com/video-dev/hls.js/ 腾讯视频SDK（TCPlayerLi
在html5中播放m3u8的插件
weixin_35753431的博客
01-04 2136
在 HTML5 中，你可以使用 <video> 标签来播放 m3u8 视频。你可以将 m3u8 视频的 URL 指定为 video 标签的 src 属性。例如： <video src="http://example.com/video.m3u8" controls></video> 你也可以使用第三方的播放器库来播放 m3u8 视频，比如 Hls.js。你可以...
Video.js 播放m3u8视频
01-22
首先，要在Video.js中支持M3U8播放，我们需要引入一个名为`videojs5.hlsjs.js`的组件。这个组件是Video.js与HLS.js库的结合，HLS.js是一个JavaScript库，允许在不支持HLS原生的浏览器中播放M3U8视频。要使用这个组件...
video.js支持m3u8格式直播的实现示例
11-20
在这个示例中，我们首先引入了video.js库和videojs-contrib-hls.js插件，这两个文件是支持m3u8格式直播的关键。然后创建了一个video元素，并添加了source标签指向m3u8播放列表。video.js的初始化配置包括关闭大播放...
vue通过video.js解决m3u8视频播放格式的方法
12-10
今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用...
videojs播放rtmp、m3u8直播流，测试源代码
11-30
videojs播放rtmp、m3u8直播流，测试源代码，需要部署在服务器中（tomcat或IIS或http-server）中，同时需要开启网站支持flash，具体注意事项或步骤见使用须知。另外，资源提供各热点rtmp在线流供测试使用
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码，Chrome + Firefox 
html中 DPlayer 播放m3u8文件【方式二】
@必意玲
10-11 5626
通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入。如果你的vscode没有，需要vscode装一个插件。，或者你可以直接放在服务器里面在访问html。// 对地址进行解析。
有支持M3U8格式的HTML5播放器
weixin_34176694的博客
02-05 6998
2019独角兽企业重金招聘Python工程师标准>>> ...
HTML5点播m3u8(hls)格式视频
良_123的专栏
05-23 9995
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
video标签播放m3u8格式视频-------html页面
weixin_39150852的博客
04-27 1万+
m3u8是苹果公司推出一种视频播放标准，是m3u的一种，不过 编码方式是utf-8，是一种文件检索格式，将视频切割成一小段一小段的ts格式的视频文件，然后存在服务器中（现在为了减少I/o访问次数，一般存在服务器的内存中），通过m3u8解析出来路径，然后去请求。这样每次请求很小一段视频，可以做到近似于实时播放的效果。 目前WEB上主流的直播方案主要是HLS和RTMP，移动端主...
html5标签video播放m3u8格式的视频
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
10-26 4979
<video class="tvhou" width="100%" height="100%" controls="controls" autoplay="autoplay" x-webkit-airplay="true" x5-video-player-fullscreen="true" preload="auto" playsinline="true" webkit-playsinline x5-video-player-typ="h5"> .
web前端HTML播放HLS在线视频流（m3u8）
热门推荐
Evil_0_0_0的博客
04-26 2万+
最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：https://www.jianshu.com/p/8845b976fcaf 先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。 开始正题： 1、一个插件hls....
vue3 使用video.js 播放m3u8
11-08
要在Vue3中使用video.js播放m3u8格式的视频，需要进行以下步骤： 1. 在Vue工程中安装video.js相关依赖：npm install --save video.js npm install --save videojs-contrib-hls 2. 在main.js中引入video.js的css文件：import 'video.js/dist/video-js.css' 3. 在需要使用video.js播放m3u8视频的组件中，引入video.js和videojs-contrib-hls插件：import videojs from 'video.js' import 'videojs-contrib-hls' 4. 在组件的mounted钩子函数中，创建video.js实例并初始化：let player = videojs('video-player') player.src({ src: 'http://example.com/path/to/video.m3u8', type: 'application/x-mpegURL' }) player.play()

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值