标签：src bupt name m3u8 Demo u3m8 hls edu videoJS
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中浏览器打开直接播放
标签：src,bupt,name,m3u8,Demo,u3m8,hls,edu,videoJS 来源： https://blog.csdn.net/iT_MaNongking/article/details/117290458
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。