应用HTML和JavaScript播放当地的媒体(视频音频)文件的方法

最新推荐文章于 2024-08-12 16:02:51 发布

云南仟龙Mark

最新推荐文章于 2024-08-12 16:02:51 发布

阅读量1.1k

点赞数 1

文章标签： javascript html html5

原文链接：https://blog.51cto.com/u_15111999/3649451

版权

这篇文章关键介绍了应用HTML和JavaScript播放视频当地的新闻媒体(视频音频)文档的方式 ,文中给大伙儿介绍的特别详尽，对我们的学习培训或工作中具备一定的参考借鉴使用价值，必须的小伙伴能够参考下

最先提醒，处在可靠的必须JavaScript不可以同时浏览当地資源文件，那怎么办呢？下边详细介绍一种方式。在网页中插进一个input节点并特定type为file，假如必须播放好几个文件，能够加上属性multiple。申请注册文件节点被升级时的回调函数，在回调函数中启用URL.createObjectURL涵数来获得刚挑选文件的url，随后把该url设定为audio或video的src值就可以。

1、应用HTML和JavaScript播放手机本地视频文件的实例，源代码以下：

<!DOCTYPE html>
 
<html >
 
<head>
 
       <meta charset="utf-8">
 
       <title>播放本地的视频文件</title>
 
</head>
 
<body>
 
<h3><center>视频播放测试<center></h3>
 
<hr color="#666666">
 
<input type="file" id="file" οnchange="onInputFileChange()">
 
<br/>
 
<video id="video_id"  width="520" height="360" controls autoplay loop>你的浏览器不能支持HTML5视频</video>
 
<script>
 
function onInputFileChange(http://www.qlyl1688.com/articles/zsqscc2651.html) {
 
      var file = document.getElementById('file').files[0];
 
      var url = URL.createObjectURL(file);
 
      console.log(url);
 
      document.getElementById("video_id").src = url;
 
}
 
</script>
 
</body>
 
</html>

保存为文件名DemoF.html（在此，我将该网页文件放在目录中D:\网页练习，你可根据你的实际情况而定），用浏览器打开显示如下：

应用HTML和JavaScript播放当地的媒体(视频音频)文件的方法_html

2、使用HTML和JavaScript播放本地音频文件的示例，源码如下：

<!DOCTYPE html>
 
<html >
 
<head>
 
       <meta charset="utf-8">
 
       <title>播放本地的音频文件</title>
 
</head>
 
<body>
 
<h3><center>本地的音频播放测试<center></h3>
 
<hr color="#666666">
 
<input type="file" id="file" οnchange="onInputFileChange()">
 
<br/>
 
<audio id="audio_id" controls autoplay loop>你的浏览器不能支持HTML5音频 </audio>
 
<script>
 
function onInputFileChange() {
 
      var file = document.getElementById('file').files[0];
 
      var url = URL.createObjectURL(file);
 
      console.log(url);
 
      document.getElementById("audio_id").src = url;
 
}
 
</script>
 
</body>
 
</html>