整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 标签兼容性问题

版本浏览器不识别新的语义化标签。

上面这些标签, 都是块级元素, 没有任何默认样式, 容器级标签, 可以包裹任何东西, 在语义上都比div大, 它们能包裹div, 但是div不能包裹它们。

新的提纲标签, IE9开始兼容, IE8还是不能用这些标签, 移动端中可以正常使用, 因为手机没有IE。

解决方案:利用html5shiv.js

下载地址: https://www.bootcdn.cn/html5shiv/

各类手机应用不断追求新功能的今天,兼容似乎成为不可能实现的梦想。如今,微用让梦想照进现实。尚娱微用致力于为用户提供丰富安全的手机应用资源和一站式应用管理体验,用户可以1秒安装获得3000+优质应用,适配各类手机平台、移动终端。完美兼容即点即用,尽享随心所欲的微用生活。

图片1 微用生活

完美兼容无需担心 随时更新更加省心

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。微用程序基于HTML 5技术,使得应用更加方便快捷,用户不用考虑各种版本的兼容性问题,正如网站升级和用户无关一样,微用内的所有软件升级,用户都不需要去更新,进入应用都是最新版本。一次安装,线上自动升级,相当于PC级软件自动更新一样的方便体验,让用户更省心!

图片2 微用分类

随心所欲即点即用 无需下载方便快捷

能够完美兼容,也能随心所欲。微用利用HTML5技术全面整合各类APP,集功能于大成。相比之下,独立的各类App使用起来固然方便,但用户只能使用各家自有的和合作的资源,获取多家的资源就必须下载多个App,而基于HTML 5技术的微用的优势在于通过它用户无需下载,直接使用多款应用,按需查找,方便快捷,省时间,省流量。

图片3 微用推荐

一键挑选自由无忧 安全放心使用体验

在微用,用户可以像挑衣服一样挑选自己喜欢的APP收入囊中。把常用软件都放在同一页面内,打造用户专属的应用平台。微用不限制账号登录,保证所有上架资源都是官方正版,无插件,无杂质,应用安全无害,完全不用担心帐号泄露问题,保证每位用户获得安全、优质的移动应用软件和服务。

图片4 微用娱乐

进入微用世界,用户可轻松获得最全面、最快捷的应用、游戏使用及下载服务。无需担心兼容问题,适配各类手机平台、移动终端。精彩移动生活,只要用户需要,微用就能提供!

关于微用

1、1秒安装获得3000+优质应用,最大最全的H5市场,总大小只有2M;

2、微用内全部应用及游戏均免下载、免安装、免更新,为用户减负;

3、用微用可以更省省流量、省空间、省内存、省电量,为手机减负;

4、全面优质,全方位内容覆盖,深度垂直,合作构建庞大自有内容体系。

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。


MuiPlayer 是一个开源的HTML5视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容问题,同时适应在PC、手机端播放。


特点

  • 各浏览器平台播放 ui 不能统一
  • ui 扩展之间以及状态处理容易产生冲突
  • 在不同环境下(android、ios、pc)针对 h5 video api 可能触发事件的时机尽不相同
  • 媒体格式存在各种兼容问题,muiplayer 处理了大多数在不同环境下播放的兼容问题
  • 具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放

快速开始

  • 安装

使用 npm 安装:

npm i mui-player --save

使用 yarn 安装:

yarn add mui-player
  • 使用

1 使用 script 标签引入:

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

或者使用模块管理器引入:

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2 定义播放器容器

<div id="mui-player"></div>

3 初始化构建播放器

// 初始化 MuiPlayer 插件,MuiPlayer 方法传递一个对象,该对象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'标题',
    src:'./static/media/media.mp4',
})

以上就能为初始化构建一个具有默认配置控件的视频播放器。

更多API基础配置: https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE


效果演示

  • 基础效果

  • 直播模式

  • 播放字幕

  • 播放弹幕

  • 多窗口播放


更多内容大家可自行前往阅读。

开源地址:https://gitee.com/muiplayer/hello-muiplayer