MediaElement.js对不同浏览器的支持
目前已经有很多html5播放器可以使用,使用html5播放器可以轻松的在页面中插入媒体视频,从而使我们的web页面变得更加丰富多彩,所以今天向大家推荐一款非常优秀的html5播放器MediaElement.js,它不仅能够添加我们常用的html5视频格式(mp4,m4v,mov), 而且还支持回退方式,即一些低版本的浏览器不支持HTML5播放可以采取flash的方式进行播放,从而达到支持绝大部分的浏览器。
亲测IE8下能使用HTML5的video标签,以及支持对hls流媒体的播放,webm视频格式文件暂不支持(在nodejs下完美运行,iis下问题:hls流媒体文件找不到,可能是设置有部分问题,暂时未找到解决方法,如果有大神请指教),现在来看一下小栗子:
首先下载mediaelement.js文件以及jquery.js文件
地址:https://github.com/johndyer/mediaelement
下载完后在文件夹build中找到flashmediaelement.swf,mediaelement-and-player.min.js,mediaelementplayer.css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
// 引用样式文件
<link rel="stylesheet" type="text/css" href="mediaelement-master/mediaelementplayer.css">
</head>
<body>
// 引用jquery.js文件
<script type="text/javascript" src="jquery-1.12.2.js"></script>
// 引用mediaelement-and-player.min.js文件
<script type="text/javascript" src="mediaelement-master/mediaelement-and-player.min.js"></script>
<video width="320" height="240" controls="controls" preload="none">
<!-- <source type="video/mp4" src="video/mp4.mp4" /> -->
<!-- <source type="video/webm" src="video/webm.webm" /> -->
<source src="m3u8/index.m3u8" type="application/x-mpegurl">
</video>
<script>
// 添加需要支持的媒体音频格式
$('video,webm,m3u8').mediaelementplayer();
</script>
</body>
</html>
MediaElement.js对不同浏览器的支持的更多相关文章
- JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9!三种方法!
web开发的时候有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代码! 方法一: <script type="text/jav ...
- MediaElement.js之浏览器跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...
- js里各浏览器解析XML,支持IE、火狐、Chrome等
js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...
- 判断当前IE浏览器是否支持JS
1.server 2008 r2 64位中自带的IE默认不支持js,这样一些有JS的页面就是失效,所以如果要考虑这方面的系统,需要判断浏览器是否支持JS <div class="js- ...
- 判断浏览器是否支持 JS
在有些浏览器中不支持(或者被禁用了)脚本语言,那么javascript脚本则无法被执行.但是用户并不知道浏览器是否支持,或者被禁用.我们可以通过<noscript>标签来告知用户,JS脚运 ...
- 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range
原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...
- js检测浏览器是否支持某属性
以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- js判断浏览器是否支持flash的方法
传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...
随机推荐
- 对.net技术组件的分析和选择
.net很庞杂,学习最忌讳什么?为了学而学,而不是为了用而学.我们不是为了成为教师,所以不要成为书呆子,不要成为"博士",要从庞杂的技术群中选择自己需要的内容进行学习. 如果不加选 ...
- springMVC Aspect AOP 接口耗时统计
在接口开发中,我们通常需要统计接口耗时,为后续接口性能做统计.在springMVC中可以用它的aop来记录日志. 1.在spring配置文件中开启AOP <!--*************** ...
- react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新
场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate componentDidUpdate() 这个生命周期的作用是当prop ...
- Linux--装好之后要做的几件事(转)
1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉 sudo apt-get remove libreoffi ...
- DSP, SSP, DMP
先了解下广告的产业链有哪些人群: 广告主advertisers 显然是指想为自己的品牌或者产品做广告的人,例如宝马.Intel.蒙牛-- 媒体publisers 则是提供广告位置的载体,例 ...
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose)
2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 7676 Solved: 3509[Subm ...
- 【bzoj1076】 SCOI2008—奖励关
http://www.lydsy.com/JudgeOnline/problem.php?id=1076 (题目链接) 题意 一个奖励,K次抛出宝物的机会,每次抛出都等概率的抛出n个物品中的一个,每个 ...
- HTTP请求头
了解HTTP请求,是每个BS程序员必备的素质.下面篇幅进行记录.参考网址:http://tools.jb51.net/table/http_header Http请求方式 GET: 向Web服务器请求 ...
- JS Select 月日日期联动
Js对Select控件进行联动操作,一个select选择月份后另一个select生成对应月份的所有日期. <%@ Page Language="C#" AutoEventWi ...
- Java面试之SpringMVC总结以及在面试中的一些问题.
1.简单的谈一下SpringMVC的工作流程? 流程 1.用户发送请求至前端控制器DispatcherServlet 2.DispatcherServlet收到请求调用HandlerMapping处理 ...