广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >HTML5 中怎么利用Video/Audio播放本地文件
  • 352
分享到

HTML5 中怎么利用Video/Audio播放本地文件

2024-04-02 19:04:59 352人浏览 薄情痞子
摘要

这期内容当中小编将会给大家带来有关HTML5 中怎么利用Video/Audio播放本地文件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。代码如下:<html>

这期内容当中小编将会给大家带来有关HTML5 中怎么利用Video/Audio播放本地文件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

代码如下:

<html>  <body>  <input type="file" id="file" onchange="onInputFileChange()">  <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</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>

该代码在Chrome 30和Firefox 24上测试通过,在IE上应该存在一定的兼容性问题(据我所知IE8及以前的版本肯定是不能工作的),因为IE对HTML5的支持不好,不知道IE10有没有实现相关的api

上述就是小编为大家分享的HTML5 中怎么利用Video/Audio播放本地文件了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注编程网VUE频道。

--结束END--

本文标题: HTML5 中怎么利用Video/Audio播放本地文件

本文链接: https://www.lsjlt.com/news/67331.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML5 中怎么利用Video/Audio播放本地文件
    这期内容当中小编将会给大家带来有关HTML5 中怎么利用Video/Audio播放本地文件,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。代码如下:<html>...
    99+
    2022-10-19
  • HTML5 Video/Audio播放本地文件的方法
    本篇内容主要讲解“HTML5 Video/Audio播放本地文件的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5 Video/Audio播放本地文...
    99+
    2022-10-19
  • vue中怎么使用h5 video标签实现弹窗播放本地视频
    这篇“vue中怎么使用h5 video标签实现弹窗播放本地视频”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue...
    99+
    2023-06-30
  • 利用Android怎么编写一个本地音乐播放器
    利用Android怎么编写一个本地音乐播放器?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。音乐播放需要调用service,在此,只是简单梳理播放流程。public class ...
    99+
    2023-05-31
    android roi
  • 利用Java怎么将本地文件显示在JSP文件中
    今天就跟大家聊聊有关利用Java怎么将本地文件显示在JSP文件中,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体代码如下:    <img na...
    99+
    2023-05-31
    java ava
  • 怎么解决html5中的video标签ios系统中无法播放使用的问题
    这篇文章主要介绍怎么解决html5中的video标签ios系统中无法播放使用的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先是从前端的角度去考虑,如何让safari浏览器兼容video,并支持播放(未找到解决的...
    99+
    2023-06-09
  • 怎么在Android中使用Service方法实现本地音乐播放
    这篇文章给大家介绍怎么在Android中使用Service方法实现本地音乐播放,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。主Activity控制音乐 的开始、暂停、停止、退出空能,(具体实现在下面MusicServi...
    99+
    2023-06-14
  • asp.net中怎么利用Ajax实现文本文件静态分页
    asp.net中怎么利用Ajax实现文本文件静态分页,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。 服务端部...
    99+
    2022-10-19
  • Android开发中本地html文件怎么使用webView打开
    这期内容当中小编将会给大家带来有关Android开发中本地html文件怎么使用webView打开,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。具体如下:在布局的配置文件里:<WebView and...
    99+
    2023-05-31
    android webview html
  • vue中怎么使用file-saver本地文件导出功能
    这篇文章主要讲解了“vue中怎么使用file-saver本地文件导出功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么使用file-saver本地文件导出功能”吧!1:安装xls...
    99+
    2023-06-26
  • Android应用中怎么对本地pdf文件进行加载
    这篇文章给大家介绍Android应用中怎么对本地pdf文件进行加载,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。大部分app打开pdf文件是通过intent调起手机中能打开pdf文件的工具,来查看pdf文件,如果需求是...
    99+
    2023-05-31
    android roi
  • 怎么在HTML5中Blob利用实现一个文件下载功能
    怎么在HTML5中Blob利用实现一个文件下载功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。$("#exportAll").on(&qu...
    99+
    2023-06-09
  • 怎么在Java Web项目中利用Html5 FormData实现一个文件上传功能
    怎么在Java Web项目中利用Html5 FormData实现一个文件上传功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先html页面定义有两种:Html1<fo...
    99+
    2023-05-31
    javaweb html5 formdata
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作