• 技术文章 >web前端 >H5教程

    H5中视频与音频标签和进度条如何使用

    php中世界最好的语言php中世界最好的语言2018-01-10 09:43:48原创2143
    这次给大家带来H5中视频与音频标签和进度条如何使用,H5中视频与音频标签和进度条使用的注意事项有哪些,下面就是实战案例,一起来看一下。

    最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效,

    查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的html使用video标签播放本地文件进度条会不会能用呢?

    试了一下发现真的可以使用,随后F12查看播放本地视频和播放项目中的网络响应有什么区别,发现响应头多了些东西,随把这些东西一个一个加到后台代码中,最后成功了!

    response.setHeader("Cache-Control","max-age=31536000, must-revalidate");  
    response.setHeader("Content-Length", file.length() + "");  
    if (fileName.contains(".mp4")) {  
       response.setContentType("video/mpeg4");  
    }  
    if (fileName.contains(".mp3")) {  
       response.setContentType("audio/mpeg");  
       response.setHeader("Accept-Ranges:", "bytes");  
    }

    相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    怎样使用H5调用摄像头

    H5中怎样使用postMessage实现两个网页间传递数据

    正则表达式里的match()、search()函数与match()和search()函数的具体有什么区别呢?

    以上就是H5中视频与音频标签和进度条如何使用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5 如何 进度
    上一篇:html5怎样操作indexedDB 下一篇:H5的web本地存储如何使用
    PHP编程就业班

    相关文章推荐

    • html5离线存储有哪些• 深入解析asp.net中mvc4自定义404页面(分享)• h5新增标签audio与video的使用• 避免常见的六种HTML5错误用法 (5-6)• 你值得了解的HTTP缓存机制(代码详解)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网