网页中应用m3u8格式的视频（video.js）

最新推荐文章于 2023-12-26 21:01:49 发布
最新推荐文章于 2023-12-26 21:01:49 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： 小知识 文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BubbleABC/article/details/120561274
版权

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>
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</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 preload="auto" data-setup='{}' style='width: 60%;height: auto'>
        <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>
        <!-- https://file.guanaijiajia.com/aerospace/media/videos/ruheyingduizhiyedaijuan/ -->
        <!-- <source id="source" src="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()// 视频播放
    myVideo.pause() // 视频暂停
    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>
</html>
钟Bubble
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浏览器网页上如何播放dash视频、hls(m3u8)视频和flv格式视频？
eguid音视频技术分享（JavaCV教程、FFmpeg教程、openCV图像处理教程、音视频教程）
03-14 426
想要在网页上面播放dash视频、hls(m3u8)视频和flv格式视频需要对应的转封装库，而dash.js、Hls.js和flv.js三个库提供了这三个视频格式转封装和渲染画面和音频播放的能力。
手机端videojs播放m3u8的文件.zip
08-06
手机端 安卓和ios 均可播放。 使用前请仔细看说明哦 在VUE 环境下使用 videojs播放m3u8的文件
前端video标签播放m3u8格式视频
ernesto的博客
12-24 7253
前端video标签播放m3u8格式视频 效果如下： 1、引入以下js和css <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&gt...
一个 可以在线播放 m3u8 的网页（非常实用）
最新发布
疯狂屌丝程序员
12-26 1万+
之前在做安卓直播流hls播放的功能，有时候失败了，不知道啥问题，就一直想着找一个可以在线播放的地方测试一下，找了好久终于找到一个，记录一下，以防下次需要用到。
支持m3u8格式播放的video.js
07-23
为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
vue通过video.js解决m3u8视频播放格式的方法
12-10
前言 今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题 第一种方法 1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save 网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后结果测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。小编已经亲自试验过 2.
m3u8视频文件在线播放器在线播放接口,附完整源码
03-23
使用方法： 源码上传好输入m3u8地址回车即可 接口测试：视频格式基本全部支持在线播放，不仅限于m3u8 使用方法：http://你的域名/?url=m3u8地址
m3u8播放插件,谷歌浏览器m3u8播放插件
xiaoshu611的博客
04-01 4766
转载地址：http://www.xiaoshu168.com/php/310.html
基于 Web 实现 m3u8 视频播放的简单应用示例
Python栈
06-16 5567
将视频（MP4 等）转换为 M3U8 视频的服务，可以按照以下步骤进行操作
Vue播放m3u8视频格式的视频监控（适合移动端和pc端），用了Video.js，以及多视频列表循环播放代码，已测试，可播放
xingchen678的博客
09-16 7151
先介绍只有一个视频的代码 首先，我们需要在vue工程中安装video.js相关依赖。 npm install --save video.js npm install --save videojs-contrib-hls 接着，我们在需要播放视频的页面引入js对象 import videojs from 'video.js/dist/video.min' import 'v...
html中 DPlayer 播放m3u8文件【方式二】
@必意玲
10-11 4895
通过 iframe 的src 方式嵌入播放的页面，m3u8播放地址通过参数传入。如果你的vscode没有，需要vscode装一个插件。，或者你可以直接放在服务器里面在访问html。// 对地址进行解析。
Video.js 播放m3u8视频
01-22
Video.js 播放m3u8视频 videojs5.hlsjs.js组件 播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频
video.js支持m3u8格式直播的实现示例
11-20
为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验 核心代码： <!DOCTYPE html> <html> <head> <title>videojs支持hls直播实例</title> <link href="./video.css?v=bcd2ce1385" rel="stylesheet"> </head> <body> <video id="r
m3u8文件视频播放（ckplayer）完整代码
09-05
ckplayer支持m3u8文件播放，但是官方并没有具体说明怎样配置，其实只要下载对应的m3u8.swf就可以播放m3u8文件了，此包中已经配置好了，只要将视频链接换成正确就可以播放m3u8视频了
video插件播放m3u8格式视频(存原生)
qq_44886882的博客
05-09 3346
这里使用原生的javascript实现m3u8格式视频播放。使用了包括video.min.js库和HLS插件。
浏览器使用video播放m3u8类的直播流媒体
mxydl2009的博客
03-09 7707
关于m3u8文件格式 描述 m3u8 是一种基于 HTTP Live Streaming 视频流媒体格式。m3u8文件本身是一个纯文本文件，用于存放整个视频的基本信息和分片(Segment)组成。 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，浏览器目前可以通过<video src="./test.m3u8" type="application/x-mpegURL">来播放。 生成 使用ffmpeg工具对mp4格式的视频进行基于hls协议分割可以得到m
在vue项目中使用vue-video-player播放m3u8视频文件
西洲
11-27 7330
在vue项目中使用vue-video-player播放m3u8视频文件
vue实现简单的数据筛选
huihuihaha222222的博客
06-26 2677
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv...
Vue vue-video-player播放m3u8视频流
林中明月间丶
11-03 598
https://www.jianshu.com/p/5cf3b128a57f vue播放m3u8视频流 dplayer https://blog.csdn.net/qq_36410795/article/details/107109514 videojs https://www.cnblogs.com/gg-qq/p/10782848.html vue中使用video插件vue-video-player vue常用插件之视频播放（rtmp m3u8） - smile_or - 博客园 M3U8...
video.js 播放m3u8、flv、rtmp、RTS格式视频
07-28
你可以使用 CSDN 上提供的 video.js 插件来播放 m3u8、flv、rtmp 和 RTS 格式的视频。首先，确保你已经引入了 video.js 的库文件和相关插件。 对于 m3u8 格式的视频，你可以使用 video.js-contrib-hls 插件来支持。你需要在页面中引入以下文件： ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/videojs-contrib-hls.min.js"></script> ``` 然后，你可以在页面中添加一个 video 标签，并使用以下 JavaScript 代码来初始化播放器： ```javascript var player = videojs('my-video'); player.src({ src: 'path/to/video.m3u8', type: 'application/x-mpegURL' }); ``` 对于 flv 格式的视频，你可以使用 videojs-flvjs 插件来支持。你需要在页面中引入以下文件： ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/flv.min.js"></script> <script src="//path/to/videojs-flvjs.min.js"></script> ``` 然后，你可以在页面中添加一个 video 标签，并使用以下 JavaScript 代码来初始化播放器： ```javascript var player = videojs('my-video'); player.src({ src: 'path/to/video.flv', type: 'video/flv' }); ``` 对于 rtmp 和 RTS 格式的视频，你可以使用 videojs-flash 插件来支持。你需要在页面中引入以下文件： ```html <link href="//path/to/video-js.min.css" rel="stylesheet"> <script src="//path/to/video.min.js"></script> <script src="//path/to/videojs-flash.min.js"></script> ``` 然后，你可以在页面中添加一个 video 标签，并使用以下 JavaScript 代码来初始化播放器： ```javascript var player = videojs('my-video', { techOrder: ['flash'] }); player.src({ src: 'rtmp://path/to/video', type: 'rtmp/flv' }); ``` 记得将上述代码中的路径和文件名替换成你实际使用的视频文件路径和名称。希望这些信息能帮到你！如果还有其他问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

钟Bubble

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值