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. 利用VS2005进行dump文件调试

    前言:利用drwtsn32或NTSD进行程序崩溃处理,都可以生成可用于调试的dmp格式文件.使用VS2005打开生成的DMP文件,能很方便的找出BUG所在位置.本文将讨论以下内容: 1.  程序编译选 ...

  2. 1990-D. 幻方

    描述 河图,黑点白点排列奥秘数阵:洛书,纵横斜三条线上数和皆15.这是一个古老的数字游戏,将1~9填入一个九宫格,使得每行.每列.对角线上数字的和都相同(为15).在西方,满足类似规律的矩阵称之为幻方 ...

  3. C#连接SQLite的字符串

    一.C#在不同情况下连接SQLite字符串格式 1.Basic(基本的) Data Source=filename;Version=3; 2.Using UTF16(使用UTF16编码) Data S ...

  4. HDU4907——Task schedule(BestCoder Round #3)

    Task schedule Description有一台机器,并且给你这台机器的工作表,工作表上有n个任务,机器在ti时间执行第i个任务,1秒即可完成1个任务.有m个询问,每个询问有一个数字q,表示如 ...

  5. Android 去除EditText边框，添加下划线，

    首先:重写EditText //请在这里添加您的包名 import android.content.Context; import android.graphics.Canvas; import an ...

  6. dup和dup2函数以及管道的实现

    疑问:管道应该不是这样实现的,因为这要求修改程序的代码 dup和dup2也是两个非常有用的调用,它们的作用都是用来复制一个文件的描述符.它们经常用来重定向进程的stdin.stdout和stderr. ...

  7. 【HDOJ】3828 A + B problem

    显然需要贪心,重叠越长越好,这样最终的串长尽可能短.需要注意的是,不要考虑中间结果,显然是个状态dp.先做预处理去重,然后求任意一对串的公共长度. /* 3828 */ #include <io ...

  8. Svn忽略配置

     Debug bin obj *.user *.suo *.vspscc *.scc *.o *.lo *.la *.al .libs *.so *.so.[0-9]* *.a *.pyc *.pyo ...

  9. MSSQL复制功能实现与Oracle数据库同步

    1.分别建立链接对数据库进行操作,SQLServer可以用ADO.NET,操作Oracle可以用OLEDB或者用System.Data.OracleClient(需要添加引用才能用) 这种方案的优点就 ...

  10. ListView中使用type需要注意的东西 java.lang.ArrayIndexOutOfBoundsException: length=2; index=2 addScrapView

    ListView中使用type需要注意的东西 在使用ListView时,如果使用了getItemViewType, 记得他的值一定要是从0开始计数的. 且要覆盖getViewTypeCount方法.并 ...