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

kuaidi.ping-jia.net  作者:佚名   更新日期:2024-08-22
用html5的video标签,不能播放MP4视频

  您好!很高兴为您答疑。
  目前来说,确实是这样的。因此HTML5 视频的有以下5点注意事项:
1、需创建三种视频格式以实现对 Firefox,Safari/Chrome 和 IE 的支持;
2、不要省略任何一种格式。不能将 HTML5 如你所想的那样兼容 Firefox 和 Safari,Safari 能解释 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;
3、记住全屏显示不被 Safari 和 Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览。
4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 元素。然而,如果浏览器支持,则会期望加载合适的文件。
  如果对我们的回答存在任何疑问,欢迎继续问询。

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


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



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



<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事件,这样就完成了你想要的功能。。
不知道我是不是理解错了你的需求
这个是你想要的答案吗