videojs-flvjs是video.js的扩展，让video.js支持flv.js播放器，可以在video.js的techOrder里配置flvjs播放器。
下面做了一个切换m3u8和flv直播流的简易工具：

<!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>video+flv视频播放测试</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet"crossorigin="anonymous"><link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js/dist/video.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.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="videojs-flvjs-player"><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-m3u8" class="form1"><label for="url">M3U8地址：</label><input type="text" size="100" name="video" id="url-m3u8"><button type="submit">加载M3U8</button></form><form action="" id="load-url-flv" class="form1"><label for="url">FLV地址：</label><input type="text" size="100" name="video" id="url-flv"><button type="submit">加载FLV</button></form></div></div>
</body></html>
<script>(function (window, videojs) {var player = window.player = videojs('videojs-flvjs-player', {techOrder: ['html5', 'flvjs'],flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},controls: true,preload: "none"});// 切换到m3u8格式var loadUrl = document.getElementById('load-url-m3u8');var url = document.getElementById('url-m3u8');loadUrl.addEventListener('submit', function (event) {event.preventDefault();player.reset();player.src({src: url.value,type: 'application/x-mpegURL'});player.load(url.value);player.play()return false;});// 切换到FLV格式var loadUrl_flv = document.getElementById('load-url-flv');var url_flv = document.getElementById('url-flv');loadUrl_flv.addEventListener('submit', function (event) {event.preventDefault();player.reset();player.src({src: url_flv.value,type: 'video/x-flv'});player.load(url_flv.value);player.play()return false;});}(window, window.videojs));
</script>

参考

https://mister-ben.github.io/videojs-flvjs/
https://blog.csdn.net/little__SuperMan/article/details/89203270/

videojs-flvjs：video.js + flv.js播放m3u8和flv视频相关推荐

vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
HLS播放：html5下用video标签来播放m3u8格式的视频
HLS播放:html5下用video标签来播放m3u8格式的视频 <video class="tvhou" width="100%" height=&qu ...
vue-video-player播放m3u8格式的视频
一.vue-video-player的使用: 1.安装 npm i vue-video-player -D 2.引入(组件内引入) import { videoPlayer } from 'vue- ...
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载
1.下载依赖 npm i dplayer -S npm i hls.js -S 2.vue页面 <template><view class="content"&g ...
WebRTC播放器通过js Video标签拉流播放有时无法刷新视频画面的原因排查
对于WebRTC的研究,TSINGSEE青犀视频已经进入一个更深的阶段,不仅仅满足于播放或者分屏此类功能,还需要视频的连贯.自动刷新等功能. 在WebRTC播放器的开发中,我们使用的是js Video ...
前端web如何播放m3u8格式的视频
m3u8格式的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放.目前WEB上主流的直播方案主要是HLS和RTMP,移动端主要是H ...
h5播放m3u8格式的视频
前提: 最近有个需求需要 h5界面播放一个1G的视频,害怕卡顿解决方式: 用视频切片的方式解决操作验证我们先来一个m3u8 格式的视频文件随便找一个视频文件,按照这个操作我们就成功得到了 ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Flv.js全面解析
Flv.js全面解析常见直播协议 Flv.js概览 Flv.js结构图架构图功能 API文档相关 MediaDataSource的字段列表如下, Config flvjs.getFeatureL ...

videojs-flvjs：video.js + flv.js播放m3u8和flv视频

参考

videojs-flvjs：video.js + flv.js播放m3u8和flv视频相关推荐

最新文章

热门文章