html视频播放器(video)

视频解码器 H.264 Throra VP8
音频解码器 AAC MP3 Ogg

1.视频标准

video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg

相关属性和音频猜不多,不重复 https://blog.csdn.net/weixin_44797182/article/details/99685567、

当然还有一些不同的。如下

2.视频属性

2.1、 禁止下载

  <video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>

2.2、 自动播放 (不同浏览器的表现不一样)

  <video src="test.mp4" controls autoplay width="400" height="300"></video>

2.3、 循环播放

  <video src="test.mp4" controls loop width="400" height="300"></video>

2.4、预加载

  <video src="test.mp4" controls preload width="400" height="300"></video>

2.5、音量控制

  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
  <script>
    var video = document.getElementById('_volume')
    video.volume = 2 // 取值范围:0 到 1,0 是静音,0.5 是一半的音量,1 是最大音量(默认值)
  </script>

2.6、 播放时间控制

  <video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="time"></video>
  <script>
    var video = document.getElementById('time')
    console.log(video.currentTime)  // 视频当前正在播放的时间(单位:s),进度条拖到哪就显示当前的时间
    video.currentTime = 60  // 默认从60秒处开始播放
  </script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在线课程学习</title>
		<link rel="stylesheet" href="css/course.css">
	</head>
	<body>
		<div id="course">
			<!--创建视频播放窗口-->
			<video id="screen" width="640" src="video/art.mp4" controls autoplay>
				对不起,您的浏览器不支持HTML5视频。
			</video>
			<!--课程大纲列表-->
			<ul>
				<li>
					<!--课程标题-->
					<h3>欧洲简史</h3>
				</li>
				<!--水平线-->
				<hr />
				<li>
					<img src="image/course/play.png" />
					<span>早期基督美术建筑</span>
				</li>
				<hr />
				<li>
					<img src="image/course/play.png" />
					<span>早期基督美术之绘画</span>
				</li>
				<!--水平线-->
				<hr />
				<li>
					<img src="image/course/play.png" />
					<span>早期基督美术之绘画:拜占庭美术</span>
				</li>
				<!--水平线-->
				<hr />
				<li>
					<img src="image/course/play.png" />
					<span>早期基督美术之绘画:镶嵌画</span>
				</li>
				<!--水平线-->
				<hr />
				<li>
					<img src="image/course/play.png" />
					<span>早期基督美术之绘画:罗马式美术</span>
				</li>
			</ul>
		</div>
		<script>
			//获取video对象
			var screen = document.getElementById("screen");
			var oLi = document.getElementsByTagName("li");
			//跳转播放时间
			function playCourse(time) {
				//重置当前播放时间
				screen.currentTime = time;
				//继续播放视频
				screen.play();
			}
			console.log(oLi)
			for (var i = 0; i < oLi.length; i++) {
				oLi[i].index = i;
				oLi[i].onclick = function() {
					for (i = 0; i < oLi.length; i++) {
						switch (this.index) {
							case 1:
								playCourse(60);
								break;
							case 2:
								playCourse(120);
								break;
							case 3:
								playCourse(220);
								break;
							case 4:
								playCourse(320);
								break;
							case 5:
								playCourse(420);
								break;
							/* 除此之外 */
							default:
							playCourse(0)
						}
					}
				}
			}
		</script>
	</body>
</html>

详细内容https://www.cnblogs.com/rogerwu/p/10072119.html

posted @   coderwcb  阅读(3204)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示