m3u8 是一种基于HTTP Live Streaming（HLS）文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。目前由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持。
video.js是H5视频播放器，支持播放m3u8视频。这里做了一个简易的m3u8视频地址测试页：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>M3U8视频播放测试</title><link rel="stylesheet" crossorigin="anonymous" href="https://unpkg.com/bootstrap@4.6.2/dist/css/bootstrap.min.css"><link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.min.js"></script><style type="text/css">.example-video {width: 100%;height: 500px;}.form1 {display: block;margin: 10px auto;}</style>
</head><body><div class="container"><div class="row"><video class="video-js example-video vjs-default-skin vjs-big-play-centered" controls preload="auto" id="example-video"><source src="//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"type="application/x-mpegURL"></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video></div><div class="row"><form action="" id="load-url" class="form1"><label for="url">视频地址：</label><input type="text" size="100" name="video" id="url"><button type="submit">加载</button></form></div></div><script>(function (window, videojs) {var player = window.player = videojs('example-video');// hook up the video switchervar loadUrl = document.getElementById('load-url');var url = document.getElementById('url');loadUrl.addEventListener('submit', function (event) {event.preventDefault();player.src({src: url.value,type: 'application/x-mpegURL'});return false;});}(window, window.videojs));</script>
</body></html>

参考

https://videojs.github.io/videojs-contrib-hls/

video.js播放m3u8视频相关推荐

m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
H5视频之video.js播放m3u8
最近接触了这一块,简单说下吧. m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率 ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
Video.js 播放m3u8直播流
谷歌浏览器全面禁止flash导致直播流无法播放, 通过video.js结合videojs-contrib-hls实现播放m3u8直播流粘贴到html打开即可 <!DOCTYPE html> ...

video.js播放m3u8视频

参考

video.js播放m3u8视频相关推荐

最新文章

热门文章