HTML5線上播放本地視訊（IE9以上的瀏覽器）
阿新 • • 發佈：2019-02-17
<!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>
<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>