zoukankan      html  css  js  c++  java
  • HTML5如何播放本地文件

    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的本地文件播放简单问题回答就是上述的内容了。

  • 相关阅读:
    字在线中
    关于页面显示层叠问题
    左边竖条
    jquery 动态添加元素事件绑定问题
    工作总结
    多文本输入,内容过多时输入框会自动撑开
    lunix常用命令
    springboot整合es availableProcessors is already set to [2], rejecting [2]
    mysql 主从复制架构
    elastic search 第一次安装 报错记录
  • 原文地址:https://www.cnblogs.com/liweitao/p/3816969.html
Copyright © 2011-2022 走看看