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>运行上述代码后，将弹出输出窗口，显示画布以及网页上的捕获按钮。
