为了账号安全,请及时绑定邮箱和手机立即绑定

求解,如何在HTML5中使用video标签 播放本地视频?具体问题如下所示

求解,如何在HTML5中使用video标签 播放本地视频?具体问题如下所示

小唯快跑啊 2021-05-25 11:19:39

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"的视频文件,请教一下怎么改,账户没多少分,时间有点紧,谢谢了!

查看完整描述

2 回答

?
侃侃无极

TA贡献1521条经验 获得超10个赞

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控制视频播放的效果。




查看完整回答
反对 回复 2021-05-31

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信