HTML5在操作的过程中，很多朋友会遇到一个问题，那就是在播放本地文件的时候时常会有一些问题存在，使得HTML5才操作的过程中本地文件播放不流畅或者是不能够正常的播放。现在，我们就来看看HTML5如何播放本地文件。
代码实例如下：
<html>  
<body>  
<input type="file" id="file">  
<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>  
  <ul class="pagination">
      <li><a href="#">&laquo;</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页。
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul> 
还可以将active或disabled应用于<span>标签，这样就可以让其保持需要的样式并移除点击功能。
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
想要更小或更大的分页？要得到更多尺寸，加上.pagination-lg或.pagination-sm吧。
     <p></p>
    <ul class="pagination pagination-lg">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>  
    <p></p> 
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul> 
    <p></p>
    <ul class="pagination pagination-sm">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    关于HTML5如何播放本地文件的代码操作就是上述的内容了。大家在操作相关的问题的时候不妨自己多看看上述的介绍，能够有助于自己在完成HTML5的本地文件播放操作代码当中获得一定的帮助。更多关于HTML5的本地文件播放的问题大家可以直接在专业网站上进行查看，获取到更多的专业解答。但是，关于HTML5的本地文件播放简单问题回答就是上述的内容了。

HTML5如何播放本地文件的更多相关文章

  1. HTML5 Video/Audio播放本地文件

    这段时间经常看到开发者在反复询问同一个问题,为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”. 这是因为浏览器中的JavaScript不能直接直接访 ...

  2. Android中webview html5 自动播放本地视频

    MainActivity代码 public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override ...

  3. iOS开发系列--音频播放（音效和音乐）播放本地的

    音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为 点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音 ...

  4. .NET winform播放音频文件

    前提:最近要求做一个在winform端做一个音频文件播放的功能,至此,总结最近搜寻的相关资料. 一.微软提供了三种方式来播放音频文件 1.通过System.Media.SoundPlayer来播放 2 ...

  5. Android Studio上手，基于VideoView的本地文件及流媒体播放器

    既然是第一个Android程序.少不了要Hello World. 1. 新建安卓project watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm0wNTE ...

  6. iOS从零开始学习直播之音频1.播放本地音频文件

      现在直播越来越火,俨然已经成为了下一个红海.作为一个资深码农(我只喜欢这样称呼自己,不喜欢别人这样称呼我),我必须赶上时代的潮流,开始研究视频直播.发现视屏直播类的文章上来就讲拉流.推流.采集.美 ...

  7. SAP播放本地视频及音频(仅限于window MediaPlayer可播放文件)

    这个是从SCN上看到的,自己稍加修改,编制,做的还可以,可以播放视频,音频,唯一的不足就是不能控制播放视频的显示窗口大小,希望有人能帮忙解决,感激! 视频播放类:(新建类Z_CL_MEDIA,点击基于 ...

  8. HTML5 本地文件操作之FileSystemAPI实例（四）

    目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...

  9. HTML5 本地文件操作之FileSystemAPI实例（三）

    文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFi ...

随机推荐

  1. dll的概念 dll导出变量 函数 类

    1. DLL的概念 DLL(Dynamic Linkable Library),动态链接库,可以向程序提供一些函数.变量或类.这些可以直接拿来使用. 静态链接库与动态链接库的区别:   (1)静态链接 ...

  2. Web Api 入门

    http://www.cnblogs.com/developersupport/p/WebAPI-Security.html http://www.cnblogs.com/r01cn/archive/ ...

  3. MVC项目总结（别人的好文章）

    引用 http://www.cnblogs.com/xling/archive/2012/07/11/2587002.html

  4. 利用link标签rel="alternate stylesheet"属性实现界面动态换肤

    rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用 ...

  5. QT的QWidget和Delphi的TPanel很像，都是万能的基础控件

    都只提供了最基本的功能,实际可以在上面随心所欲的创造新的控件.而自身也已经拥有基础的显示功能,而TCustomControl就不行. 比如,这样使用QWidget,直接就可以显示: void Main ...

  6. DELPHI下API简述（1800个API）

    DELPHI下API简述 http://zero.cnbct.org/show.asp?id=144 auxGetDevCaps API 获取附属设备容量 auxGetNumDevs API 返回附属 ...

  7. 如何将sql server数据库转化成sqlite数据库

    今天在将sql server转化为sqlite的数据库的时候,遇到不少的问题,在网上搜了很长时间,都没有找到合适的软件将sql server转化成sqlite,其中用到了SqliteDev软件,在转化 ...

  8. chinacloud大数据新闻

    2015年大数据发展八大趋势   (0 篇回复) “数据很丰满,信息很骨感”:Sight Machine想用大数据的方法,打碎两者间的屏障   (0 篇回复) 百度携大数据"圈地" ...

  9. zoj 3351 Bloodsucker(概率 dp)

    题目:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4530 dp[i]表示现在存在i个吸血鬼要达成目标(全为吸血鬼)天数的数学 ...

  10. Innodb引擎 long semaphore waits

    上一篇介绍了因为子表过多,导致innodb crash的情况,但crash的原因是long semaphore waits.long semaphore waits又为何物? 背景:Innodb使用了 ...