html5新媒体播放器标签video、audio 与embed、object
- html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件
- embed是针对非IE的浏览器的媒体播放器
- video是html5出的一种新标准,但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型,但常用的只有mp4。
- 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的,
1、 video、audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930085.html
2、embed
embed和object都是网页用的嵌入脚本,用来播放flash文件的
如果使用的是flash文件或者其他video标签不支持的格式。那么可以使用embed标签插入。
embed标签只支持PC端,移动端无效,video标签移动和PC端均支持,如果你的视频文件是mp4格式的,那么推荐使用video标签,兼容PC端和移动端。
我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签。也就是OBJECT和EMBED标签
embed标签是html5版本新增的标签,是使用来定义嵌入的内容(如插件、媒体等)
如果浏览器没安装没启用flash,那么浏览器会跳出一个提示框访问是否要自动安装flash player。
object和embed的区别:
是为了兼容不同浏览器,IE只支持对Object的解析;火狐,谷歌,Safari只支持对Embed的解析。注意:使用<object>
+<embed>
是为了更好的兼容性,如果场景允许,推荐使用<object>
。
语法:
<embed src="/i/helloworld.swf" type="application/x-shockwave-flash" />
embed标签属性值:
标签属性设置 | 说明 |
src | 被嵌入内容的地址 |
type | 嵌入内容的文件类型MIME类型 |
autostart | 自动播放(boolean) |
loop | 循环播放(boolean) |
hidden | 控制面板是否显示(true,no) |
starttime=mm:ss(分:秒) | 开始播放的时间 |
volume | 音量大小(0~100) |
height、width | 容器属性 |
units | 该属性指定高和宽的单位为pixels或en |
controls=console | 一般正常面板(多属性值) |
name | 该属性给对象取名,以便其他对象利用 |
title= | 说明文字 |
palette=color|color | 表示嵌入的音频或视频文件的前景色和背景色,第一个值为前景色,第二个值为背景色,中间用 | 隔开。color可以是RGB色(RRGGBB)也可以是颜色名 |
align | 规定控制面板和当前行中的对象的对齐方式 |
embed支持很多媒体类型比如图像、音频、视频、可以参考文件类型(IANA MIME 类型)列表,说明:embed标签是一个空标签,没有元素内容。在html中可以不关闭标签,而在xhtml中必须使用“/”关闭标签,如:<embed />
MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。
常用的MIME类型:
文件后缀 | Mime类型 | 说明 |
.flv | flv/flv-flash | 在线播放 |
.html或.htm | text/html | 超文本标记语言文本 |
.rtf | application/rtf | RTF文本 |
.gif | image/gif | GIF图形 |
.jpeg或.jpg | image/jpeg | JPEG图形 |
.au | audio/basic | au声音文件 |
.mid或.midi | audio/midi或audio/x-midi | MIDI音乐文件 |
.ra或.ram或.rm | audio/x-pn-realaudio | RealAudio音乐文件 |
.mpg或.mpeg或.mp3 | video/mpeg | MPEG文件 |
.avi | video/x-msvideo | AVI文件 |
.gz | application/x-gzip | GZIP文件 |
.tar | application/x-tar | TAR文件 |
.exe | application/octet-stream | 下载文件类型 |
.rmvb | video/vnd.rn-realvideo | 在线播放 |
.txt | text/plain | 普通文本 |
.mrp | application/octet-stream | MRP文件(国内普遍的手机) |
.ipa | application/iphone-package-archive | IPA文件(IPHONE) |
.deb | application/x-debian-package-archive | DED文件(IPHONE) |
.apk | application/vnd.android.package-archive | APK文件(安卓系统) |
.cab | application/vnd.cab-com-archive | CAB文件(Windows Mobile) |
.xap | application/x-silverlight-app | XAP文件(Windows Phone 7) |
.sis | application/vnd.symbian.install-archive | SIS文件(symbian平台) |
.jar | application/java-archive | JAR文件(JAVA平台手机通用格式) |
.jad | text/vnd.sun.j2me.app-descriptor | JAD文件(JAVA平台手机通用格式) |
.sisx | application/vnd.symbian.epoc/x-sisx-app | SISX文件(symbian平台) |
3、Object
object参数说明
param name标签是在这个播放插件中嵌入的一些功能和播放参数,比如(你可以抄下来):
<param name="playcount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0,无限循环。-->
<param name="autostart" value="0"><!--控制播放方式: x=1,打开网页自动播放; x=0,按播放键播放。-->
<param name="clicktoplay" value="1"><!--控制播放开关: x=1,可鼠标点击控制播放或暂停状态; x=0,禁用此功能。-->
<param name="displaysize" value="0"><!--控制播放画面: x=0,原始大小; x=1,一半大小; x=2,2倍大小。-->
<param name="enablefullscreen controls" value="1"><!--控制切换全屏: x=1,允许切换为全屏; x=0,禁用此功能。-->
<param name="showaudio controls" value="1"><!--控制音量: x=1,允许调节音量; x=0,禁止音量调节。-->
<param name="enablecontext menu" value="1"><!--控制快捷菜单: x=1,允许使用右键菜单; x=0,禁用右键菜单。-->
<param name="showdisplay" value="1"><!--控制版权信息: x=1,显示电影及作者信息;x=0,不显示相关信息-->
<param NAME="AutoStart" VALUE="-1"><!--是否自动播放-->
<param NAME="Balance" VALUE="0"><!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1"><!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1"><!--是否启用上下文菜单-->
<param NAME="url" VALUE="http://1.wma"> <!--播放的文件地址--><param NAME="PlayCount" VALUE="1"><!--播放次数控制,为整数-->
<param name="rate" value="1"><!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0"><!--控件设置:当前位置-->
<param name="currentMarker" value="0"><!--控件设置:当前标记-->
<param name="defaultFrame" value=""><!--显示默认框架-->
<param name="invokeURLs" value="0"><!--脚本命令设置:是否调用URL-->
<param name="baseURL" value=""><!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0"><!--是否按比例伸展-->
<param name="volume" value="50"><!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0"><!--是否静音--
<param name="uiMode" value="mini"><!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--><param name="windowlessVideo" value="0"><!--如果是0可以允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="0"><!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="-1"><!--是否启用错误提示报告-->
<param name="SAMIStyle" value><!--SAMI样式-->
<param name="SAMIFilename" value><!--字幕ID-->
使用 object 和 embed 标签来嵌入,细心的会发现,object 的很多参数和 embed 里面的很多属性是重复的,为什么这样做?为了浏览器兼容性,有的浏览器支持 object,有的支持 embed,这也是为什么要修改 Flash 的参数时两个地方都要改的原因。这种方法是 Macromedia 一直以来的官方方法,最大限度的保证了 Flash 的功能,没有兼容性问题。
现阶段用 JS 嵌入 Flash 是最完美的方法.
对于不支持object的浏览器,可以使用如下方式,浏览器将跳过object,识别embed元素:
<object width="400" height="40" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
播放音频可使用object、embed,此外html5也有audio标签与video相对应,且用法相同。
html5新媒体播放器标签video、audio 与embed、object的更多相关文章
- Plyr – 简单,灵活的 HTML5 媒体播放器
Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示 ...
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- JavaScript自定义媒体播放器
使用<audio>和<video>元素的play()和pause()方法,可以手工控制媒体文件的播放.组合使用属性.事件和这两个方法,很容易创建一个自定义的媒体播放器,如下面的 ...
- 快速构建Windows 8风格应用21-构建简单媒体播放器
原文:快速构建Windows 8风格应用21-构建简单媒体播放器 本篇博文主要介绍如何构建一个简单的媒体播放器. <快速构建Windows 8风格应用20-MediaElement>博文中 ...
- (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...
- 【C语言入门教程】4.10 综合实例 - 媒体播放器
4.10.1 建立播放列表 数据字典 名称 数据类型 说明 MAX_LENGTH 符号常量 用于定义数组长度,表示列表最大长度 MAX_FILE_LENGTH 符号常量 用于定义数组长度,表示文件名最 ...
- html5版 音乐播放器
html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...
- Movist for Mac(高清媒体播放器)v2.0.7中文特别版
Movist for Mac中文破解版是目前Mac平台上最好用的视频播放器,功能强大简单好用.movist mac版拥有美观简洁的用户界面,提供多种功能,支持视频解码加速高品质的字幕,全屏幕浏览,是与 ...
- ubbuntu---多媒体播放器VLC
VLC多媒体播放器:Video LAN Client 信息载体:可见光通信技术(Visible Light Communication,VLC).@ https://baike.baidu.com/i ...
随机推荐
- 简单粗暴详细讲解javascript实现函数柯里化
函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...
- 【Offer】[20] 【表示数值的字符串】
题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2" ...
- 使用xampp将angular项目运行在web服务器
需求 在开发angular项目时,因为需要做自适配以适应不同的屏幕,而我的电脑只有1366的.所以我现在需要在本地将angular项目运行在xampp上,然后用手机开热点,给本机和另一台大屏电脑或手机 ...
- [币严区块链]数字货币交易所之以太坊(ETH)钱包对接(四) 使用web3j对接以太坊钱包
本文给大家介绍了 Web3j Java 版本的框架的基本使用,大家可根据本文的内容进行扩展性的练习,对其他 API 的使用进行尝试. 使用web3j对接以太坊钱包 一.开发准备事项 启动 Geth 此 ...
- Mysql - 高可用方案之MHA
一.概述 本文将介绍mysql的MHA(Master High Availability)方案,官方文档地址:https://github.com/yoshinorim/mha4mysql-manag ...
- 松软科技课堂:sql函数-AVG
定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SELECT AVG(column_name) FROM table_name SQL AVG() ...
- C#基础知识总结(二)--泛型
什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为 ...
- Java方法调用的字节码指令学习
Java1.8环境下,我们在编写程序时会进行各种方法调用,虚拟机在执行这些调用的时候会用到不同的字节码指令,共有如下五种: invokespecial:调用私有实例方法: invokestatic:调 ...
- uboot学习之uboot启动流程简述
一.uboot启动分为了三个阶段BL0.BL1.BL2:BL0表示上电后运行ROM中固化的一段程序,其中ROM中的程序是厂家写进去的,所以具体功能可能根据厂家芯片而有所不同.功能如下: 初始化系统时钟 ...
- webstorm中关闭烦人Eslint语法检查
打开许久没打开的webstrom,以前关闭的配置不知道怎么又乱了,react项目到处报错,真是没法忍. 关闭eslint位置:File-->Setting-->Languages& ...