目前已经有很多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对不同浏览器的支持的更多相关文章

  1. JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！三种方法！

    web开发的时候有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代码! 方法一: <script type="text/jav ...

  2. MediaElement.js之浏览器跨域请求视频播放

    浏览器跨域问题一直以来都是作为前端开发人员常见的问题,所以今天学习了下如何使浏览器跨域请求资源 需要了解的知识 -域(主域,子域,什么是跨域) 简单来说由于浏览器同源策略,凡是发送请求url的协议(h ...

  3. js里各浏览器解析XML,支持IE、火狐、Chrome等

    js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...

  4. 判断当前IE浏览器是否支持JS

    1.server 2008 r2 64位中自带的IE默认不支持js,这样一些有JS的页面就是失效,所以如果要考虑这方面的系统,需要判断浏览器是否支持JS <div class="js- ...

  5. 判断浏览器是否支持 JS

    在有些浏览器中不支持(或者被禁用了)脚本语言,那么javascript脚本则无法被执行.但是用户并不知道浏览器是否支持,或者被禁用.我们可以通过<noscript>标签来告知用户,JS脚运 ...

  6. 原来浏览器原生支持JS Base64编码解码 outside of the Latin1 range

    原来浏览器原生支持JS Base64编码解码 « 张鑫旭-鑫空间-鑫生活 https://www.zhangxinxu.com/wordpress/2018/08/js-base64-atob-bto ...

  7. js检测浏览器是否支持某属性

    以检测浏览器是否支持 input 标签的 required 属性为例: var isSupport = 'required' in document.createElement('input');

  8. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  9. js判断浏览器是否支持flash的方法

    传统浏览器可以使用window.ActiveXObject检查浏览器是否启用相关的控件.检查浏览器是否启用flash控件,需要先检查浏览器是否支持ActiveXObject,可以使用typeof检查w ...

随机推荐

  1. 通过接口实现JAVA和.NET互调用-JNInterface

    使用C#编程多年,也十分感激微软在语言架构.语法糖.编辑器等方面给自己带来的便利.但因为最近工作中有接触到JAVA,渐渐地发现的确像大家说的那样,JAVA的生态很好,要找点什么几乎都有现成的,于是自然 ...

  2. win10下JDK的安装与环境变量配置

    1.到官网下载最新版本的JDK http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.安装JDK,同安装其他软件一样 ...

  3. Bzoj3144 [Hnoi2013]切糕

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1494  Solved: 818 Description Input 第一行是三个正整数P,Q,R,表 ...

  4. ubuntu qtcreator 硬件权限问题

    在使用 qtcreator 在 ubuntu(debian.mint 等类同)下做开发时,常用到权限问题,无法直接操作硬件,比如串口等. 办法之一是使用 root 打开 creator,进而进行其他操 ...

  5. U盘因为装linux系统变小了

    U盘在Windows下被UltraISO等软件制作成Linux启动盘后会自动被格式化成FAT格式,导致容量变小. 用DiskGenius去修复 http://www.jb51.net/softs/75 ...

  6. Alpha阶段第一次Scrum Meeting

    Scrum Meeting   Alpha 情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起始时间 2016/10/18 00:00 敏捷开发终止时间 2016/10/20 00: ...

  7. 机器学习中的相似性度量(Similarity Measurement)

    机器学习中的相似性度量(Similarity Measurement) 在做分类时常常需要估算不同样本之间的相似性度量(Similarity Measurement),这时通常采用的方法就是计算样本间 ...

  8. cURL函数

    PHP的cURL函数是通过libcurl库与服务器使用各种类型的协议进行连接和通信的,curl目前支持HTTP GET .HTTP POST .HTTPS认证.FTP上传.HTTP基于表单的上传.co ...

  9. C语言基础(1)-基本语法及注意事项

    1. include 头文件包含 #include <stdio.h>这个是hello world程序的第一句话 # 代表预编译指令 #include的意思就是头文件包含,使用C语言库函数 ...

  10. ThinkPHP3.2.3整合smarty模板（二）

    前言:继ThinkPHP3.2.3整合smarty模板(一)之后,继续来探讨一下tp框架整合smarty模板,看到有人在群上问到怎么使用自定义的常量,今天就具体来谈谈: 一.开发一个项目,必不可少会用 ...