HTML - 视频播放器

HTML 本地视频播放器

HTML 功能，包括原生视频支持，无需 Flash。下面的播放器基于 HTML、CSS 和 Java 脚本工作。您可以将本地视频文件拖放到容器中。

例子

让我们看一下下面的例子，我们将允许用户上传本地视频文件


<!DOCTYPE html>
<html>
<head>
	 <style>
			body {
				 background-color: #E8DAEF;
				 text-align: center;
			}
	 </style>
</head>
<body>
	 <input type="file" accept="video/*">
	 <br>
	 <video controls height="300" width="500"></video>
	 <script>
			(function localFileVideoPlayer() {
				 'WELCOME'
				 var x = function(event) {
						var vid = this.files[0]
						var a = window.a || window.webkitURL
						var y = a.createObjectURL(vid)
						var videoNode = document.querySelector('video')
						videoNode.src = y
				 }
				 var z = document.querySelector('input')
				 z.addEventListener('change', x, false)
			})()
	 </script>
</body>
</html>

当我们运行上述代码时，它将生成一个显示视频控件的输出，允许用户在网页上上传本地视频文件。

屏幕截图

下面的记录器基于html，CSS和java脚本工作。在进入此页面之前，用户必须允许相机访问成本图像

例子

考虑以下示例，我们将使用用户相机并捕获图像


<html>
<head>
	 <style>
			body {
				 text-align: center;
				 background-color: #EAFAF1;
			}
	 </style>
</head>
<body>
	 <video id="vid" controls autoplay></video>
	 <canvas id="mytutorial" width="600" height="300" style="border:1px solid #d3d3d3;"></canvas>
	 <button id="snapshot">Take Picture</button>
	 <script>
			const x = document.getElementById('vid');
			const mycanvas = document.getElementById('mytutorial');
			const y = mycanvas.getContext('2d');
			const clickpicture = document.getElementById('snapshot');
			const a = {
				 video: true,
			};
			clickpicture.addEventListener('click', () => {
				 y.drawImage(x, 1, 0, mycanvas.width, mycanvas.height);
			});
			navigator.mediaDevices.getUserMedia(a).then((stream) => {
				 x.srcObject = stream;
			});
	 </script>
</body>
</html>

运行上述代码后，将弹出输出窗口，显示画布以及网页上的捕获按钮。

打印本页