在网页展示媒体对象，离不开HTML5的 audio和video对象。但这两个目前来看兼容性方面还得关注一下。

目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候，碰到了一些兼容性问题后，总结出如下几点：

兼容性问题1：让所有浏览器支持video标签

   这个好解决，引入html5media.min.js即可，具体在github上下载。

https://github.com/etianen/html5media

　　

兼容性问题2：让 video 标签的src属性能识别视频类型。

我是用的MP4文件，src的值是一个请求MP4地址，代码如下:

<video src="https://xxxx/xxxx/getVideo?name=123.mp4" type="video/mp4">

</video>

虽然我也知道这个地址返回的是一个mp4的文件流，但是除了chrome，FireFox，uc等浏览器能支持外，其他浏览器均不支持，识别不了这种格式。

于是换成另外一种写法

<video src="https://xxxx/xxxx/123.mp4" type="video/mp4">

</video>

也就是说，从阿里云的接口取到了MP4文件后，保存到自己的服务器上，，然后再把video的src指向这个静态文件地址，兼容性问题就解决了，微信浏览器，其他的主流浏览器都可以播放这个视频。

 

至于深层次原因，有兴趣的同学可以研究下，从流的上传下载续传与video的src的关系方面入手

HTML5VEDIO标签阿里云-微信浏览器兼容性问题的更多相关文章

  1. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

  2. 关于 <textarea ></textarea >标签在苹果微信浏览器出现 内阴影

    解决方法:(去除浏览器默认的样式元素) textarea  { box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:none; }

  3. 阿里云创建CentOS系统设置

    1 首先设置你购买的云盘配置,例如cpu,内存,磁盘类型.容量,网络类型等 2.阿里云可以使用浏览器进行远程shell连接 首先需要输入远程密码,第一次连接的时候会提示 一定要牢记 输入密码后进入sh ...

  4. SQL Server 数据库本地备份文件通过OSS工具上阿里云（恢复还原数据库）

    SQL Server数据库上云,通过备份文件上传进行恢复. 1.通过OSS工具上传备份文件. 相关知识和操作步骤请参考: https://blog.csdn.net/weixin_35773751/a ...

  5. Maven配置使用阿里云镜像

    在settings.xml文件中的mirrors下添加mirror标签 <!-- 阿里云仓库 --> <mirror> <id>alimaven</id> ...

  6. 微信小程序里如何用阿里云上传视频，图片。。

    纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...

  7. Hexo一键部署到阿里云OSS并设置浏览器缓存

    自建博客地址:https://bytelife.net,欢迎访问! 本文为博客自动同步文章,为了更好的阅读体验,建议您移步至我的博客 本文作者: Jeffrey 本文链接: https://bytel ...

  8. 天河微信小程序入门：阿里云tomcat免费配置https

    天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我 ...

  9. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

随机推荐

  1. Java 运动模糊

    Java 运动模糊代码 想用Java 写个运动模糊的效果,无奈本人水平有限,国内也没找到资源,于是Google到了一个文档,特地分享出来! 本代码源自 http://www.jhlabs.com/ip ...

  2. Spring切面优先级

    项目中有两个切面,这两个切面都作用于同一个方法,哪个先执行哪个后执行呢,所以要定义一个切面的优先级 import java.util.Arrays; import org.aspectj.lang.J ...

  3. linux下安装python3

    不建议卸载python2 可能会导致系统内其他软件无法使用 1.下载 wget https://www.python.org/ftp/python/3.6.0/Python-3.6.0a1.tar.x ...

  4. linkin大话数据结构--泛型

    泛型(Generic) 什么是泛型? java5开始出现的一种对Java语言类型的一种拓展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数类型时指定的类型占位符,就好比方法的形式参数 ...

  5. Linux中的shell到底是什么？

    (曾经有一段充足的时间放在我面前,可以学linux,而我没有珍惜,等我失去的时候我才后悔莫及,人世间最痛苦的事莫过于此.) 最近,要将项目代码部署到linux环境下运行,但是对linux毫无基础,之前 ...

  6. weex 启动 android 模拟器(mac环境)

    一.android studio和android sdk下载 1.android studio下载并安装https://developer.android.com/studio/index.html ...

  7. awk grep sed cut学习

    awk学习网站 grep sed cut

  8. Markdown内嵌Html语言

    概述 Markdown是内嵌Html语言的,这使得我们可以在Markdown文档里面实现很多有趣的东西.现在记录在此,供自己以后参考,相信对其他人也有用. 介绍 Markdown的语法只有一个目标:作 ...

  9. Electron 桌面应用打包（npm run build）简述(windows + mac)

    最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { " ...

  10. 蓝桥杯练习系统—基础练习 2n皇后问题

    问题描述 给定一个n*n的棋盘,棋盘中有一些位置不能放皇后.现在要向棋盘中放入n个黑皇后和n个白皇后, 使任意的两个黑皇后都不在同一行.同一列或同一条对角线上,任意的两个白皇后都不在同一行. 同一列或 ...