HTML5在线播放本地视频（IE9以上的浏览器）

最新推荐文章于 2025-07-14 09:30:11 发布

Burppe

最新推荐文章于 2025-07-14 09:30:11 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Burppe/article/details/79387360

本文介绍了一个简单的HTML5视频播放器实现方案，通过JavaScript控制文件选择与播放，适用于希望了解基本HTML5视频标签及其实现方式的学习者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML >
<html>
<head>
<title>Html5视频播放</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/video-js.css" rel="stylesheet">
<style>
.m{ width: 840px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>
<body>
<div class="m">
<input id="v_file" type="file" style="display: none;"
onChange="play()" />
<button id="play" onClick="selectFiles()">
播放文件
</button>
<video id="video_id" controls autoplay width="740" height="400">
您的浏览器不支持 HTML5 video 标签
</video>
</div>
<script type="text/javascript">
function selectFiles() {
var v_file = document.getElementById('v_file');
v_file.click();
}
function play() {
var file = document.getElementById('v_file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video_id").src = url;
}
</script>
</body>
</html>