videoJS 播放 u3m8 格式视频Demo_iT_MaNongZYQ的博客-程序员信息网_js videojs m8

技术标签: html5  前端  videoJs  js  video  javascript  

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中浏览器打开直接播放
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/iT_MaNongking/article/details/117290458

智能推荐

NIO Netty粘包拆包问题说明、演示拆包粘包情况代码以及解决_Jeremy_Lee123的博客-程序员信息网

概述TCP传输协议是面向连接的,面向流提供高可靠的服务。收发两端(服务端和客户端)都要有一一成对的socket,因此,发送端为了将多个发给接收端的包,更有效地发给对方,使用了优化算法(Nagle算法),将多次间隔时间较小且数据较小的数据包,合成一个大的数据块,然后进行封包,这样做虽然提高了传输的效率,但是这样接收端就难以分辨出一个个完整的包的大小了,因为面向流的通信时无消息保护边界的。由于TCP无消息保护边界,需要在接收端处理消息边界问题,也就是粘包、拆包问题。示意图:说明:服务端给客户端

Microsoft版的caffe在windows10下编译_龙矜的博客-程序员信息网

Microsoft版的caffe在windows10下编译使用python1.微软caffe2.Cuda3.Cudnn合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLo...

魅族18关闭桌面悬浮球方法步骤_爱学习的小兔子的博客-程序员信息网_魅族手机旋转屏悬浮球

现在用户们都已经非常适应全面屏手机的使用了。但刚买的手机桌面还是会有一个悬浮导航键。很多小伙伴想要关闭却不知道方法。于是今天换换就给大家介绍一下魅族18关闭悬浮球的方法吧!魅族18关闭悬浮球步骤1、通常这些手机使用的更改都是在设置里面操作。2、进入设置后。找到辅助功能。3、在辅助功能里我们就可以看见悬浮球选项。4、选择悬浮球右侧按钮点击即可关闭。5、当然。还有一种更简单的方法便是用户们下拉菜单栏。点击悬浮球选项就能关闭。...

【FPGA教程案例33】通信案例3——基于FPGA的BPSK调制信号产生,通过matlab测试其星座图_fpga bpsk_fpga和matlab的博客-程序员信息网

BPSK(BinaryPhaseShiftKeying)-------二进制相移键控。是把模拟信号转换成数据值的转换方式之一,利用偏离相位的复数波浪组合来表现信息键控移相方式。BPSK使用了基准的正弦波和相位反转的波浪,使一方为0,另一方为1,从而可以同时传送接受2值(1比特)的信息。BPSK的映射关系如下所示其实现结构图如下图所示首先,将输入的1010二进制数据中的0都转化为-1,使得非极性码变为极性码。然后将数据通过一个FIR低通滤波器进行成型处理,成型滤波的主要目的是。......

算法起步之Dijkstra算法_weixin_30242907的博客-程序员信息网

算法起步之Dijkstra算法 原文: 算法起步之Dijkstra算法 友情提示:转载请注明出处【作者 idlear 博客:http://blog.csdn.net/idlear/article/details/19687579】 Dijkst...

js中对象合并的4种方式,数组合并的4种方法_燕穗子博客的博客-程序员信息网_js 对象合并

一、对象合并1、拓展运算符(...)2、Object.assign()3、递归赋值4、jquery中的extend()二、数组合并1、扩展操作符2、使用array.concat()方法进行合并3、关于Apply4、array.push()方法进行合并

随便推点

springboot 整合zookeeper框架(curator)_风中~少年的博客-程序员信息网_error org.apache.curator.framework.imps.curatorfra

1、版本 springboot 2.2.7.RELEASE jdk 1.8 zookeeper 3.5.6 curator 3.2.02、pom文件:这里只列出zookeeper 和 curator&lt;dependencies&gt; &lt;dependency&gt; &lt;groupId&gt;com.zz&lt;/groupId&gt; &lt;artifactId&gt;zz-log&lt;/arti...

C++ primer Plus 第十五章 友元、异常和其他_追随光、成为光的博客-程序员信息网

15.1友元类并非只有友元函数,还可以有友元类,友元类的所有方法都可以访问原始类的私有成员和保护成员。下面我们通过一个例子来讲解一下友元类定义TV类和Rmote类,分别作为电视机和遥控器的类由于遥控器可以控制电视机,即遥控器可以访问电视机的成员,所以要将Rmote类声明为TV的友元类,但是如果只是将Rmote类的一个成员函数声明为友元函数,则需要知道Rmote类的声明,所以TV类应...

windows默认调试器注册表位置_风清扬_jd的博客-程序员信息网

Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\AeDebug]"UserDebuggerHotKey"=dword:00000000"Debugger"="\"C:\\Windows\\system32\\vsjitdebugger.exe\" -p %ld -e %ld"[HKEY_LOCAL_MACHINE\SOFTWARE\Micros

【论文笔记】QBSUM: 基于查找的文本摘要数据集_啦啦伟vv的博客-程序员信息网

QBSUM: a Large-Scale Query-Based Document Summarization Dataset fromReal-world Applications基于查询的文档摘要旨在提取或生成直接回答或与搜索查询相关的文档的摘要。这是一项重要的技术,可以有益于各种应用程序,例如搜索引擎、文档级机器阅读理解和聊天机器人。目前,为基于查询的摘要设计的数据集数量不足,现有数据集的规模和质量也有限。此外,据我们所知,没有公开可用的基于中文查询的文档摘要数据集。在本文中,我们提出了 QBSUM

Jquery easyui从零单排之datagrid查询_我本良人的博客-程序员信息网

这里开始学习datagrid查询功能的实现。一、前台代码: Start from zero <table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true"

InSAR 大气校正数据 GACOS_dingli8570的博客-程序员信息网

Generic Atmospheric Correction Online Service for InSAR (GACOS) 是纽卡斯尔大学Li Zhenhong 教授团队提供大气改正数据,数据可以在网站 http://ceg-research.ncl.ac.uk/v2/gacos/上进行申请,时间分辨率可以精确到分钟,空间分辨率为90m。申请到数据之后可以利用该数据对InSAR的...

推荐文章

热门文章

相关标签