videoJS 播放 u3m8 格式视频Demo

VideoJs 官网地址

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>前端播放m3u8格式卫视视频</title><script src="https://cdn.bootcss.com/video.js/7.7.6/video.min.js"></script><link href="https://cdn.bootcss.com/video.js/7.7.6/video-js.min.css" rel="stylesheet"><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script><style>#sourcelist {width: 50%;}button{width: 8.55%;margin: 5px;}/*       #liveVideo{margin: auto 500px;} */</style></head><body><h2>视频资源</h2><div id="sourcelist"></div><h2>播放窗口</h2><div id="title"></div><div id="liveVideo"><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="600"height="500" data-setup='{}'><source id="source" type="application/x-mpegURL"></video></div>
</html><script>videojs.options.autoplay = true;// videojs 简单使用console.log(videojs);var source = document.getElementById('source');var sourcelist = document.getElementById('sourcelist');var title = document.getElementById('title');var videoorigin = document.getElementById('videoorigin');const src = 'blob:https://videojs.com/81d8956c-195a-4476-9bd6-bb274093c598';source.setAttribute('src', src);var myVideo = videojs('myVideo', {bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,playbackRates: [0.5, 1, 1.5, 2]});myVideo.play(); // 视频播放myVideo.pause(); // 视频暂停function showSourceList() {const sourceList = [{name: 'cctv1一套',src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'},{name: 'cctv2二套',src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8'},{name: 'CCTV3高清',src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8'},{name: 'CCTV4高清',src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8'},{name: 'CCTV5+高清',src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8'},{name: 'CCTV6高清',src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8'},{name: 'CCTV7高清',src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8'},{name: 'CCTV-8高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8'},{name: 'CCTV-9高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8'},{name: 'CCTV-10高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8'},{name: 'CCTV-11高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8'},{name: 'CCTV-12高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8'},{name: 'CCTV-13高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8'},{name: 'CCTV-14高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8'},{name: 'CCTV-15高清 ',src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8'},{name: 'CHC高清电影 ',src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8'},{name: '北京卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8'},{name: '北京文艺高清 ',src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8'},{name: '湖南卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8'},{name: '浙江卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8'},{name: '江苏卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8'},{name: '东方卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8'},{name: '安徽卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8'},{name: '黑龙江卫视 ',src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8'},{name: '辽宁卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8'},{name: '深圳卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8'},{name: '广东卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8'},{name: '天津卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8'},{name: '湖北卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8'},{name: '东南卫视高清 ',src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8'},{name: '北京纪实高清 ',src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8'},{name: '民视新闻台 ',src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8'},];const list = [];sourceList.map(item => {var sourceListDiv = document.createElement('button');sourceListDiv.id = item.src;sourceListDiv.name = item.name;sourceListDiv.innerText = item.name;sourceListDiv.onclick = () => {source.setAttribute('src', item.src);console.log('change:', item.src);myVideo.src({src: item.src,type: 'application/x-mpegURL',withCredentials: true});videoorigin.setAttribute('src', item.src);title.innerText = item.name;myVideo.load(); // 视频播放myVideo.play();myVideo.pause(); // 视频暂停};console.log(sourcelist);sourcelist.appendChild(sourceListDiv);});}showSourceList();
</script>

直接复制至html中浏览器打开直接播放

videoJS 播放 u3m8 格式视频Demo相关推荐

videojs播放m3u8后缀视频Demo
videojs播放m3u8后缀视频Demo 转载自:https://segmentfault.com/a/1190000024447688 <!DOCTYPE html><html ...
通过Vue+flvjs在HTML5中播放flv格式视频文件—demo及api
目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的. 因此提供两种解析方法嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件. 这里推荐dplayer--h ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
m3u8, flv, mp4格式视频demo源码分享
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>m3u ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
html背景mov,科技常识：html5自动播放mov格式视频的实例代码
今天小编跟大家讲解下有关html5自动播放mov格式视频的实例代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5自动播放mov格式视频的实例代码的相关资料,希望小伙伴们看了有 ...
html怎样自动播放视频,html5自动播放mov格式视频的实例代码
这个不算啥新奇吧?但还是记录一下. 这个问题应该这么看. 1.首先网站要支持.MOV格式文件就是说,网站要能识别.MOV格式文件. 如何识别?设置MIME类型.以IIS为例.除了可以在IIS界面上直 ...

videoJS 播放 u3m8 格式视频Demo

videoJS 播放 u3m8 格式视频Demo

VideoJs 官网地址

直接复制至html中浏览器打开直接播放

videoJS 播放 u3m8 格式视频Demo相关推荐

最新文章

热门文章