html视频播放器（video）

矫情吗；* 2021-10-29 14:58 610阅读 0赞

视频解码器 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、 禁止下载

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

2.3、 循环播放

2.4、预加载

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