HTML5中 使用video标签 播放本地视频

Question

JS：
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video_id").src = url;
}
</script>
html代码：

<input type="file" id="file" onchange="onInputFileChange()">
<video id="video_id" controls autoplay loop></video>
现在我想把input改成一个button，而不是打开文件菜单来选择，然后能够点击button后打开本地文件，使用本机上的固定地址访问，比如"D:\\123\\test.mp4"的视频文件，请教一下怎么改，账户没多少分，时间有点紧，谢谢了！

Answer 1

1、新建一个html文件，命名为test.html，用于介绍如何使用video控制视频。

2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。

5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件，测试js控制视频播放的效果。

Answer 2

Video 对象属性 属性描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。

Answer 3

<div class="content">
<input id="v_file" type="file" style="display:none;" onChange="play()"/>
<button id="play" onClick="yincang()">播放</button>
<video id="video_id" controls autoplay></video>
</div>
<script>
function yincang(){
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>
用display把input隐藏起来，然后注册一个click事件，这样就完成了你想要的功能。。
不知道我是不是理解错了你的需求
这个是你想要的答案吗追问

我的意思是 不要通过打开文件选项来手动选择视频文件，而是点击按钮后，自动读取"D:\\123\\test.mp4"的视频文件。

追答

你这个直接在video的src里设置一个文件不就行了吗？
我查了一下，你可能是想点击按钮后直接就播放文件，就算这个先使用src设置好，也是无法播放的。因为在得到用户允许后我们才可以播放本地文件的，要不然各种网页上一个按钮，被用户点击一下，然后就进行某种操作，那岂不是太危险了。故，要读取并运行用户磁盘上的文件，必须得到用户的允许（也就是那个选择）

追问

现在碰到的问题就是： 存放在代码文件夹里面的本地音频能播放，视频却不能播放

本回答被提问者和网友采纳