前端HTML不使用flash兼容IE浏览器播放视频
前言：最近公司项目上有个需求就是在IE8上不使用flash技术来去实现视频播放
分析：IE8不支持HTML5，所以不能使用video标签，在非IE的浏览器可以使用video标签
我的解决
使用object标签去调用windows media player，来播放视频，据我现在的知识来说，在IE8中不用flash播放视频也只有这个解决方案了
缺点：因为我们是用的windows media player，所以 要求client端需要有windows media player，这个是微软开发的，所以只在windows上有，而且是自带的，其他系统没有，在任务栏搜索框搜索windows media player就能看得到，JS判断电脑上是否有windows media player代码如下：
代码来源：在网页中通过调用Windows Media Player来探测特定文件
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试电脑上是否有windows media player</title>
</head>
<body>
<b> res://C:\Program Files\Windows Media Player\wmplayer.exe/16/1 </b>
<br>
<br>
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<PARAM NAME="URL" VALUE="res://C%3a%5cProgram Files%5cWindows Media Player%5cwmplayer.exe/16/1">
<param name="captioningID" value="displaylyric" />
<PARAM NAME="autoStart" VALUE="True">
</object>
<script LANGUAGE = "Jscript" FOR = Player EVENT = error()>
if(Player.error.item(0).errorDescription.length==189){
alert("Click the play button");
}
else
{
alert("Click the play button");
}
</script>
</body>
</html>
DEMO代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兼容IE8播放视频</title>
</head>
<body style="width: 100%;height: 100%">
<!--
格式 是否兼容
mp4 y http://vjs.zencdn.net/v/oceans.mp4
flv n https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
mkv y https://sample-videos.com/video123/mkv/720/big_buck_bunny_720p_1mb.mkv
3gp y https://sample-videos.com/video123/3gp/144/big_buck_bunny_144p_2mb.3gp
-->
<!--[if IE]>
<object id="MediaPlayer"
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="100%"
height="100%" standby="Loading Windows Media Player components…"
<!–二进制媒体文件–>
type="application/x-oleobject"
codebase='style="color: #0000CC'>
<!–文件名称–>
<param name="FileName" value="http://vjs.zencdn.net/v/oceans.mp4">
<!–控制播放方式: =1，打开网页自动播放; =0，按播放键播放–>
<param name="AutoStart" value="1">
<!–是否显示控件–>
<param name="ShowControls" value="true">
<!–缓冲时间–>
<param name="BufferingTime" value="2">
<!–当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间–>
<param name="ShowStatusBar" value="true">
<!–是否自动调整播放大小–>
<param name="AutoSize" value="true">
<!–播放的文件地址–>
<param name="InvokeURLs" value="false">
<param name="AnimationatStart" value="1">
<!–是否显示当前播放跟踪条,即当前的播放进度条–>
<param name="TransparentatStart" value="1">
<!–是否循环播放–>
<param name="Loop" value="1">
</object>
<![endif]-->
<!-- 非IE -->
<!--
video 标签
MP4 y
flv n
mkv n
3gp n
-->
<!--[if !IE]><!-->
<video src="http://vjs.zencdn.net/v/oceans.mp4" controls></video>
<!--<![endif]-->
</body>
</html>
type="application/x-oleobject" 属性
这是在邮件的MIME协议和其他多媒体协议里提到的对于对象类型的标示， application/x-oleobject是不明确类型的二进制可执行程序的意思，其他的还有如text/html等
classid 属性
object调用的插件ID，在注册表中可以找到
详情看：object标签中classid的详解
object标签内嵌param标签
添加插件的属性，windows midea player的属性如下
==================================
AllowChangeDisplaySize 返回或设置最终用户是否能设置显示尺寸(逻辑型)
AllowScan 返回或设置是否允许扫描(逻辑型)
AnimationAtStart 返回或设置控件开始播放之前是否先播放一个动画序列(逻辑型)
AudioStream 返回或设置音频流的编号(用于多音频流的剪辑，默认为-1)(长整型)
AutoRewind 返回或设置媒体文件播放完毕后是否自动回绕(逻辑型)
AutoSize 返回或设置是否自动调整控件大小来适应载入的媒体(逻辑型)
AutoStart 返回或设置在载入媒体文件之后是否自动开始播放(逻辑型)
Balance 返回或设置指定立体声媒体文件的播放声道(-10000为左声道，10000为右声道，0为立体声)(长整型)
Bandwidth 返回或设置当前文件的带宽(长整型)
BaseURL 返回基本的 HTTP URL(字符串)
BufferingCount 返回媒体文件回放时缓冲的总时间(长整型)
BufferingProgress 返回缓冲完成的百分比(长整型)
BufferingTime 返回缓冲的时间(双精度型)
CanPreview 返回或设置当前显示的剪辑是能否被预览(逻辑型)
CanScan 返回或设置当前文件是否支持快进或快退(逻辑型)
CanSeek 返回或设置当前文件是否能搜索并定位到某个时间(逻辑型)
CanSeekToMarkers 返回或设置文件是否支持搜索到标签(逻辑型)
CaptioningID 返回在标题中显示的帧或控件的名称(字符串)
ChannelDescription 返回电台的描述(字符串)
ChannelName 返回电台的名称(字符串)
ChannelURL 返回电台的元文件的位置(字符串)
ClickToPlay 返回或设置是否可以通过点击图像暂停或播放剪辑(逻辑型)
ClientID 返回客户端唯一的标识符(字符串)
CodecCount 返回文件使用的可安装的 codecs 的个数(长整型)
ContactAddress 返回电台的联系地址(字符串)
ContactEmail 返回电台的联系电子邮件地址(字符串)
ContactPhone 返回电台的联系电话(字符串)
CreationDate 返回剪辑的创建日期(日期型)
CurrentMarker 返回或设置当前书签号码(长整型)
CurrentPosition 返回或设置剪辑的当前位置(双精度型)
CursorType 返回或设置指针类型(长整型)
DefaultFrame 返回或设置控件的默认目标 Http 帧(字符串)
DisplayBackColor 返回或设置显示面板的背景色(OLE_COLOR 值)
DisplayForeColor 返回或设置显示面板的前景色(OLE_COLOR 值)
DisplayMode 返回或设置显示面板是否用秒或帧的形式显示当前位置(MPDisplayModeConstants 值)
DisplaySize 返回或设置图像显示窗口的大小(MPDisplaySizeConstant 值)
Duration 返回或设置剪辑剪辑的播放时间(双精度型)
EnableContextMenu 返回或设置是否允许使用上下文菜单(逻辑型)
Enabled 返回或设置控件是否可用(逻辑型)
EnableFullScreenControls 返回或设置全屏幕控制是否可用(逻辑型)
EnablePositionControls 返回或设置位置控制是否可用(逻辑型)
EnableTracker 返回或设置搜索栏控制是否可用(逻辑型)
ErrorCode 返回当前错误代码(长整型)
ErrorCorrection 返回当前剪辑的错误修正类型(长整型)
ErrorDescription 返回当前错误的描述(字符串)
FileName 返回或设置要播放的剪辑的文件名称(字符串)
HasError 返回控件是否发生错误(逻辑型)
HasMultipleItems 返回或设置控件是否包含某些多重项目的内容(逻辑型)
ImageSourceHeight 返回或设置当前剪辑的原始图像高度(长整型)
ImageSourceWidth 返回或设置当前剪辑的原始图像宽度(长整型)
InvokeURLs 返回或设置 URL 是否自动发送请求(逻辑型)
IsBroadcast 返回或设置源是否进行广播(逻辑型)
IsDurationValid 返回或设置持续时间值是否有效(逻辑型)
Language 返回或设置用于本地化语言支持的当前区域语言(长整型)
LostPackets 返回丢失的数据包数量(长整型)
MarkerCount 返回文件书签的数量(长整型)
Mute 返回或设置控件是否播放声音(逻辑型)
OpenState 返回控件的内容源状态(长整型)
PlayCount 返回或设置一个剪辑播放的次数(长整型)
PlayState 返回控件的当前操作状态(长整型)
PreviewMode 返回或设置控件是否处在预览模式(逻辑型)
Rate 返回或设置回放帧频(双精度型)
ReadyState 返回控件是否准备就绪(ReadyStateConstant 值)
ReceivedPackets 返回已接收到的数据包的数量(长整型)
ReceptionQuality 返回最后 30 秒接收到的数据包的百分比(长整型)
RecoveredPackets 返回已转换的数据包的数量(长整型)
SAMIFileName 返回或设置 closed-captioning 文件名(字符串)
SAMILang 返回或设置 closed captioning 语言(字符串)
SAMIStyle 返回或设置 closed captioning 风格(字符串)
SelectionEnd 返回或设置流的结束位置(双精度型)
SelectionStart 返回或设置流的起始位置(双精度型)
SendErrorEvents 返回或设置控件是否发送错误事件(逻辑型)
SendKeyboardEvents 返回或设置控件是否发送键盘事件(逻辑型)
SendMouseClickEvents 返回或设置控件是否发送鼠标单击事件(逻辑型)
SendMouseMoveEvents 返回或设置控件是否发送鼠标移动事件(逻辑型)
SendOpenStateChangeEvents 返回或设置控件是否发送打开状态改变事件(逻辑型)
SendPlayStateChangeEvents 返回或设置控件是否发送播放状态改变事件(逻辑型)
SendWarningEvents 返回或设置控件是否发送警告事件(逻辑型)
ShowAudioControls 返回或设置是否显示音频控制(逻辑型)
ShowCaptioning 返回或设置是否显示字幕(逻辑型)
ShowControls 返回或设置控制面板是否可见(逻辑型)
ShowDisplay 返回或设置是否显示显示面板(逻辑型)
ShowGotoBar 返回或设置是否显示跳转栏(逻辑型)
ShowPositionControls 返回或设置是否显示位置控制(逻辑型)
ShowStatusBar 返回或设置是否显示状态栏(逻辑型)
ShowTracker 返回或设置是否显示搜索栏(逻辑型)
SourceLink 返回内容文件的路径(字符串)
SourceProtocol 返回用于接收数据的协议(长整型)
StreamCount 返回媒体帧的数量(长整型)
TransparentAtStart 返回或设置在开始播放之前和停止之后控件是否透明(逻辑型)
VideoBorder3D 返回或设置视频边框是否显示为 3D 效果(逻辑型)
VideoBorderColor 返回或设置视频边框的颜色(OLE_颜色)
VideoBorderWidth 返回或设置视频边框的宽度(长整型)
Volume 返回或设置音量(长整型)
==============================================
前端HTML不使用flash兼容IE浏览器播放视频的更多相关文章
- ubuntu下安装flash player，浏览器观看视频，本人ubuntu版本14.04
首先去官网下载flash player安装包:flash_player_npapi_linux.x86_64,下载地址:https://get.adobe.com/cn/flashplayer/ 解压 ...
- Ubuntu下火狐浏览器播放视频出现解码问题
问题描述 点击视频播放按钮,视频不会出现缓冲条,也没任何提示,视频界面就一直是黑屏的状态.右键该视频界面,选择检查元素,点击控制台,发现如下问题: The video on this page can ...
- js兼容各个浏览器的复制功能
看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 【转】向HTML中插入视频并兼容所有浏览器的方法
原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- Bootstrap 3兼容IE8浏览器（转）
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
- js 复制网页内容，兼容各浏览器
因需要做一个js单击,复制当前网页url的功能.使用的是如下的方法,但是只能在ie浏览器下正常使用. 方法如下: function copyURL(){ var clipBoardContent=&q ...
- Bootstrap 3 兼容 IE8 浏览器
公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...
随机推荐
- logstash安装插件修改使用的gem源
gem source -l # 查看当前使用的gem源 gem source --remove https://rubygems.org/ # 移除gem源 gem source -a https:/ ...
- 5.监控MySQL
prometheus监控MySQL需要用到mysql_exporter. mysql_exporter 项目地址:https://github.com/prometheus/mysqld_export ...
- influxDB2.2
下载安装 下载地址 下载后在解压目录中,输入cmd执行exe文件 浏览器访问localhost:8086 选择快速开始,填写用户信息,组织信息 相关概念 InfluxDB是一个由InfluxData开 ...
- 改善C#程序的方法-3 比较器和LINQ排序
一 创建对象时考虑实现比较器 假设有这样的场景,有一个40个人的学生列表,业务中需针对学生的成绩来进行排序. 可以考虑用IComparable接口和ICompare接口实现: class Progra ...
- 条件期望：Conditional Expectation 举例详解之入门之入门之草履虫都说听懂了
我知道有很多人理解不了 "条件期望" (Conditional Expectation) 这个东西,有的时候没看清把随机变量看成事件,把 \(\sigma\)-algebra 看成 ...
- 洛谷P2602 [ZJOI2010] 数字计数 （数位DP）
白嫖的一道省选题...... 1 #include<cstdio> 2 #include<cstring> 3 #include<algorithm> 4 usin ...
- vulnhub靶场之THE PLANETS: EARTH
准备: 攻击机:虚拟机kali.本机win10. 靶机:THE PLANETS: EARTH,网段地址我这里设置的桥接,所以与本机电脑在同一网段,下载地址:https://download.vulnh ...
- virtualbox的Linux虚拟磁盘大小调整及注意事项
virtualBox 调整磁盘分区 起因 起初安装centos6.3 时,没有修改默认的硬盘空间.只有8G,导致后面安装完zookeeper,jdk之后,在安装mysql发现磁盘空间不足 扩容步骤 1 ...
- 项目管理构建工具——Maven（高阶篇)
项目管理构建工具--Maven(高阶篇) 我们在之前的文章中已经基本了解了Maven,但也仅仅只止步于了解 Maven作为我们项目管理构建的常用工具,具备许多功能,在这篇文章中我们来仔细介绍 分模块开 ...
- HFS局域网分享文件的神器（附下载链接）
温馨提示,下载链接在页末 前言 假如说你需要传递个学习资料给好基友,我们有许多种方式可选:硬盘媒介.网络分享等. 要是论速度,还是得拿3.0或以上的U盘来拷贝,确实神速哈哈.但是其也有局限性,比如需要 ...