Bye Bye Embed-再见了Embed,符合web标准的媒体播放器代码

        由于Embed标签是Netscape的私有财产,故一直未被W3C认可,对于各种媒体文件使用Embed标签是非标准的,如何改变?Elizabeth Castro的 Bye Bye Embed 一文对于各种媒体播放器给出了很好的符合web标准的代码。

在线媒体播放--Google Video and YouTube

 

None.gif<object type="application/x-shockwave-flash" 
None.gif  data
="http://video.google.com/googleplayer.swf? »
None.gif8755581808731033658"
 
None.gif  width
="400" height="326" id="VideoPlayback">
None.gif  
<param name="movie" 
None.gif    value
="http://video.google.com/googleplayer.swf? »
None.gifdocId=8755581808731033658"
 />
None.gif  
<param name="allowScriptAcess" value="sameDomain" />
None.gif  
<param name="quality" value="best" />
None.gif  
<param name="bgcolor" value="#FFFFFF" />
None.gif  
<param name="scale" value="noScale" />
None.gif  
<param name="salign" value="TL" />
None.gif  
<param name="FlashVars" value="playerMode=embedded" />
None.gif
</object>

 

其实就是FLASH文件的调用

Windows Media Player 文件

 

None.gif<object type="video/x-ms-wmv" 
None.gif  data
="http://www.sarahsnotecards.com/catalunyalive/ »
None.giffishstore.wmv"
 
None.gif  width
="320" height="260">
None.gif  
<param name="src" 
None.gif    value
="http://www.sarahsnotecards.com/catalunyalive/ »
None.giffishstore.wmv"
 />
None.gif  
<param name="autostart" value="true" />
None.gif  
<param name="controller" value="true" />
None.gif
</object>

 

上面的代码没有Windows Media Player特有的classid,作者在IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, Safari下测试通过。

QuickTime movies 没有 embed 标签

 

None.gif<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
None.gifD3488ABDDC6B"
 
None.gif  codebase
="http://www.apple.com/qtactivex/qtplugin.cab" 
None.gif  width
="320" height="260">
None.gif  
<param name="src" 
None.gif    value
="http://www.sarahsnotecards.com/catalunyalive/ »
None.gifdiables.mov"
 />
None.gif  
<param name="controller" value="true" />
None.gif  
<param name="autoplay" value="false" />
None.gif  
<!--[if !IE]>-->
None.gif  
<object type="video/quicktime" 
None.gif    data
="http://www.sarahsnotecards.com/catalunyalive/ »
None.gifdiables.mov"
 
None.gif    width
="320" height="260">
None.gif    
<param name="autoplay" value="false" />
None.gif    
<param name="controller" value="true" />
None.gif  
</object>
None.gif  
<!--<![endif]-->
None.gif
</object>

出处:蓝色理想

Bye Bye Embed

It has always gotten my goat that Internet Explorer’s non-standard use of the object tag has forced standards-loving browsers to use the non-standard embed tag in order to embed movies on a web page. Even on Apple’s site, the embed tag—a Netscape extension, for Pete’s sake!—is so entrenched that it’s hard to even find information about using the object element for QuickTime, except in a non-standard way.

The use of embed has gone on too long. Wishing for it to become part of the official specs is like wishing your partner would start putting the cap on the toothpaste. It’s not going to happen. It’s time to move on. If you want to validate your website, you have to get rid of embed. In this article, I’ll show you how.

Online Movies: Google Video and YouTube

ALA readers will remember Drew McLellan’s seminal article on Flash Satay. In that article, Drew described a method for inserting Flash animations on a page without using the embed element. Flash Satay has two parts. First, Drew figured out that you can use a single object element to call Flash as long as you specify its type adequately. Second, to properly stream Flash movies, you have to embed a sort of reference movie.

I’ve been experimenting with Drew’s code on Google Video and YouTube content. I was shocked to find that Google Video suggests you use only the embed tag to embed their video on Web pages. Alas, not shocked that they would suggest such a thing—just shocked that it actually works on Internet Explorer, which stopped supporting the non-standard, but universally-supported embed tag years ago in favor of its proprietary implementation of the standard object tag that renders that tag completely invisible to standards-loving browsers. It turns out that IE supports embed as long as the visitor has the appropriate player already installed. If not, they get an error and a generic broken-plugin icon, but no help. YouTube, for its part, does the often seen but hardly standard twice cooked approach, offering both the object and embed tags.

Since both Google Video and YouTube serve movies through the Flash player—regardless of your movie’s format when you uploaded it—you can use Drew’s single object method to embed such movies on your page. Indeed, you don’t have to use the Satay part of his code; movies on Google Video and YouTube stream even without the reference movie he suggests. (Line wraps marked » —Ed.)

<object type="application/x-shockwave-flash"
data="http://video.google.com/googleplayer.swf? »
8755581808731033658"
width="400" height="326" id="VideoPlayback">
<param name="movie"
value="http://video.google.com/googleplayer.swf? »
docId=8755581808731033658" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFFFFF" />
<param name="scale" value="noScale" />
<param name="salign" value="TL" />
<param name="FlashVars" value="playerMode=embedded" />
</object>

My real peeve, however, as I mentioned above, isn’t with Flash movies—which I have little experience with—but with QuickTime and Windows Media Player movies. I’ve been trying to embed these in a standard way for years, but without much luck. Quite recently, I came upon the MIME type that will let you use a single object for Windows Media Player files (.wmv). I still can’t quite believe it.

Eureka! One object for Windows Media Player

I am a firm believer in paying attention to mistakes. It’s only when I notice that I’ve done something wrong, and figure out why, that I am able to figure out new ways of doing things right. As I was reviewing the technique, I noticed that although it did work well for QuickTime movies (as described below), it didn’t work for Windows Media Player movies…on Opera…for Windows. I suppressed the urge to ignore it, and as I dug for an answer to that problem, I came across the MIME type that will let you use a single object to embed Windows Media Player files: video/x-ms-wmv.

To embed a Windows Media Player file, you should be able to use this code (Line wraps marked » —Ed.):

<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv"
width="320" height="260">
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>

But it turns out that IE6 and IE7 and Safari (strange bedfellows if ever there were), all need a little extra push, in the form of an extra param element:

<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/ »
fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>

And it works.

Personally, I consider this pretty experimental, or at the very least sacrilegious… embedding a Windows Media Player movie without a classid! (What’s next? Valid documents with no DOCTYPE?) I tested this simple example in IE5.5, IE6, IE7, Opera Win/Mac, Firefox Win/Mac, and Safari and it worked just fine. That said, I don’t do a lot of scripting or Microsoft stuff, so your mileage may vary. (Note: Of course, there are many more param elements that you may wish to use.)

Embedding QuickTime movies without embed

Unfortunately, I’m still pretty sure there’s no type that would convince IE to open a QuickTime movie without an ActiveX control. The obvious choices, type="video/quicktime" or even type="application/x-quicktime", only work on standards-loving browsers. So I went a different route.

Some basic premises

This technique is based on a couple of premises:

  • First, the object element is designed to be nested in order to help browsers degrade gracefully. If a browser can’t display the outermost object, it should try the next one and then the next one until it finds one it can handle. Once it does find an object it can deal with, it is supposed to ignore the rest.
  • Second, most major browsers fully support the object element. The big exception is (surprise) Internet Explorer. IE6 displays all object elements it can deal with—even if they’re nested—as well as rather ugly, ghostly apparitions of the ones it can’t. Thankfully, IE7 doesn’t do the ghosts, but it unfortunately doesn’t favor the nested objects if there’s a problem with the outer object. It just gives you an error.
  • Third, Internet Explorer (up to and including version 7) implements the object element in a non-standard way that makes other browsers ignore it.

I think the answer can be found in IE’s system of conditional comments. I started hearing about it when folks were trying to decide how to deal with IE7’s new approximation to CSS. And while IE’s commenting is peculiar to IE (read: proprietary), so is its failure to properly use the object element. It’s a perfect match.

Embedding QuickTime for Internet Explorer

I’m going to use QuickTime for my example, but you can use the same technique with Windows Media Player movies with the classid attribute, as I’ll show you a bit farther along.

To insert a basic QuickTime movie in Internet Explorer, we’ll use something like this (Line wraps marked » —Ed.):

<object classid="clsid:02BF25D5-8C17-4B23-BC80 »
-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="256">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
</object>

Don’t forget the height or the width or that horrendous classid which calls the QuickTime ActiveX control. Note that the param element that specifies the URI of the movie has a name attribute of “src,” not “url” or “movie.”

You can preview the effect here. In IE, you’ll see a movie, in other browsers you won’t see a thing.

Embedding QuickTime movies for everyone else

Although standards-loving browsers can’t deal with that object since the classid attribute is that awful number instead of a URL, they will keep looking to see if there’s any nested objects they can deal with.

So, just before the closing </object> tag, we’ll use a standard implementation of the object element (Line wraps marked » —Ed.):

<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="256">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<object type="video/quicktime"
data="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov"
width="320" height="256">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
</object>

The width and height are required, as is the type.

If you view this combination in a standards-loving browser, it looks great, if a bit loud. IE 6 (and earlier), as we mentioned before, can’t quite decide what to do with the second object and basically botches it with a ghostly apparition.

What IE can’t see, it can’t mess up

Although IE’s conditional comments were designed to be used for the rather questionable purpose of serving it special code that is hidden from other browsers, we’ll use them here to hide code from IE but not from other browsers. (It’s a bit of a slap in the face—though not really that surprising—that Microsoft has the nerve to refer to these other browsers as “downlevel”.)

Comments written with Microsoft’s “original syntax” don’t validate (surprise) but thankfully, Lachlan Hunt figured out a way to adjust them so that they do.

So we need to hide the second object from IE with its own commenting system. Insert <!--[if !IE]>--> in front of the second <object> tag and <!--<![endif]--> right after the first closing </object> tag. (Line wraps marked » —Ed.)

<object classid="clsid:02BF25D5-8C17-4B23-BC80- »
D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime"
data="http://www.sarahsnotecards.com/catalunyalive/ »
diables.mov"
width="320" height="260">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>

Now it’s beautiful!

What’s more you can use the whole collection of parameters with the object element as described on Apple’s Developers site.

Next time, I’ll test with a slightly less raucous movie.

The details for Windows Media Player

If you’d rather embed Windows Media Player files with the classid and not in the one-object method I demonstrate near the beginning of this article, the code is only slightly different. For the classid in the initial object tag, use classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6". To specify the URL of your Windows Media Player movie, use a param element with a name attribute equal to “url” for most browsers and then repeat the value using a name attribute equal to “src” for Safari.

Then in the second, standards-compliant implementation of the object, use the same code as in the one-object method.

Here’s an example (Line wraps marked » —Ed.):

<object classid="CLSID:6BF52A52-394A-11d3-B153- »
00C04F79FAA6"
id="player" width="320" height="260">
<param name="url"
value="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
<param name="src"
value="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv"
data="http://www.sarahsnotecards.com/catalunyalive »
/fishstore.wmv"
width="320" height="260">
<param name="src"
value="http://www.sarahsnotecards.com/ »
catalunyalive/fishstore.wmv" />
<param name="autostart" value="true" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>

A small wrinkle, or, what’s left to do

As of January 2006, Apple started promoting the use of JavaScript to call movies for web pages so that users wouldn’t have to click on ActiveX controls in order to activate them. It’s a long, convoluted story that began with a lawsuit against Microsoft and ended up making life difficult for the rest of us. At any rate, the methods described above work almost perfectly without any JavaScript at all, with one caveat: QuickTime movies won’t autoplay in IE. I’m not sure I’d even want the example video to autoplay! Nevertheless, I find it highly suspicious that Windows Media Player files load in the background and autoplay without any interaction while QuickTime movies show just the initial frame while the audio plays, but no moving pictures are shown.

At any rate, I want to see how the activating ActiveX controls issue plays out before I implement what I consider a rather laborious JavaScript solution to my whole site. I use very little JavaScript and like to keep it that way.

Whether you go the JavaScript route or not is actually irrelevant to the article at hand. Either way, you can still eschew the embed tag for the standard object element.

I would have liked to figure out a way to hide the inner objects only from IE 6 and earlier, since IE 7 (at least in beta 2) seems to be handling nested object elements properly, but I was unsuccessful. While there is a conditional comment that would allow such a thing (<!--[if gte IE 7]>-->), the extra characters (-->) that Lachlan offered to make the thing validate are visible with IE7 (as they should be logically). Any ideas?

On the shoulders of giants

Other people have also worked on this problem. This article agreed that two nested object elements should work but relied on what I consider rather complicated CSS to hide the second object.

Ian Hickson used the IE comments to hide a second object from IE that had Flash content.

And the aforementioned Lachlan Hunt figured out how to write valid Internet Explorer conditional comments that hide content from IE while revealing it to other browsers.

  • Illustration by Kevin Cornell

转载于:https://www.cnblogs.com/wangxiaodong/archive/2007/04/01/696343.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/300755.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET Core授权失败如何自定义响应信息?

【导读】在.NET 5之前&#xff0c;当授权失败即403时无法很友好的自定义错误信息&#xff0c;以致于比如利用Vue获取到的是空响应&#xff0c;不能很好的处理实际业务&#xff0c;同时涉及到权限粒度控制到控制器、Action&#xff0c;也不能很好的获取对应路由信息本文我们来看…

计算机电缆2x2x1.5,计算机电缆djypvp1x2x1.5

计算机电缆djypvp1x2x1.5硅橡胶计算机电缆适用于各种仪器仪表的连结&#xff0c; 以及信号传输。它具有耐高温、低温、耐腐蚀、舒缓老化等优点&#xff0c;对特殊场所或恶劣环境中的使用是目前理想的产品&#xff0c;正常使用温度为—60℃一250℃。产品特点:1.执行标准Q/ILXD-1…

虚线 实现_redis跳跃表实现

跳跃表是一种有序的数据结构&#xff0c;它通过在每个节点中维持多个指向其他节点的指针&#xff0c;从而达到快速访问节点的目的。redis 使用跳跃表作为有序集合键的底层实现之一&#xff0c;如果一个有序集合包含的元素数量比较多&#xff0c;又或者有序集合中元素的成员是比…

当代家长现状。。 | 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅&#xff08;图源都市音酱&#xff09;太真实了↓ ↓ ↓

Prometheus(一):Web服务环境监控

&#xfeff;写在前面现每个后端的同学的日常都在跟服务(接口)打交道&#xff0c;维护老的比较大单体应用、按业务拆得相对比较细的新服务、无论企业内部用的&#xff0c;面向用户的前端的服务。流量大的有流量小的&#xff0c;有重要的有不那么重要的。但是&#xff0c;不管怎…

acwing Linux 租云服务器环境配置

今天给大家讲解acwing Linux 租云服务器&环境配置&#xff0c;这里以阿里云为例子给大家讲解一下如何租用这个云服务器&#xff0c;现在有阿里云、华为云、腾讯云、京东云这么几个大的服务系统&#xff0c;我个人是喜欢华为云的嘻嘻&#xff0c;因为个人比较喜欢华为公司&a…

Shell练习题(持续更新)

1.输出1-10echo {1..10} seq -s 1 10 #默认分隔符\n for((i1;i<10;i));do echo -n "$i ";done;echo #最后echo为了换行 i1;while [ $i -le 10 ];do printf "%s " $i;i$[$i1];done;echo awk BEGIN{for(i1;i<10;i) printf "%s ",i;};…

楼层效果_1一28高楼最好最吉利的楼层是哪层?选楼层要注意什么?

在选择房屋楼层的时候&#xff0c;可能大家对于想过了&#xff0c;方法是比较纠结的&#xff0c;有些家庭可能考虑到室内的采光问题&#xff0c;有些可能考虑的是噪音的问题&#xff0c;更有些朋友们可能考虑的是室内的风水等相关问题&#xff0c;那么1一28高楼最好最吉利的楼层…

43秒处竟惊现刘强东!印度动作大片《WAR》终极预告曝光

全世界只有3.14 % 的人关注了青少年数学之旅都说印度是一个非常奇妙的国度&#xff0c;文能Z教治国&#xff0c;武能高产神片。科学家们骂骂咧咧地退出了群聊...这不&#xff0c;前不久印度又曝光了一部动作大片《WAR》&#xff1a;电影的剧情大概是讲述了一名印度士兵被派去消…

按id进行查找按名称进行排序_Excel工作表中如何按需要的顺序快速进行排序

在工作中&#xff0c;有时候需要经常对一组内容按一定的顺序来进行排序。如果每次都手动进行排序&#xff0c;会小号很多时间。因此可以将特定顺序添加到自定义序列中。有两种不同的操作方法可以来实现。方法一如图&#xff0c;现在有一列水果名称&#xff0c;之后需要都按照现…

20种最先进的机器人,感觉有点吓人!

全世界只有3.14 % 的人关注了青少年数学之旅随着科技的发展&#xff0c;机器人必然逐渐进入我们的生活&#xff0c;甚至在许多领域替代人类。以下是目前全球范围内最先进的一些机器人&#xff1a;Actroid-F这种实验性机器人的目标&#xff0c;是创造最逼真的仿人类机器人&#…

PDF批量删除注释

使用Adobe Acrobat Pro的批量处理完成 1.在“自定义”-“添加新工具集”-“动作向导”-将“创建新动作”加入-“保存”2.然后点新出现的“创建新动作”图标3.将“内容”-“删除所有注释”添加上&#xff0c;然后再添加上“保存和导出”中的保存4.保存设定的动作列表&#xff0c…

怎么让图片手机上排列_荣耀手机系列档次怎么排列?

目前&#xff0c;我们按照处理器和手机表现进行排列。荣耀magic2因为充电口(塑料问题)&#xff0c;所以&#xff0c;排名第一的位置我给荣耀V20&#xff01;其次&#xff0c;是荣耀magic2&#xff0c;然后是荣耀10&#xff0c;荣耀note10&#xff0c;其次是荣耀v10&#xff0c;…

金蝶显示服务器异常,金蝶提示云服务器异常

金蝶提示云服务器异常 内容精选换一换生命周期是指弹性云服务器从创建到删除(或释放)历经的各种状态。当云服务器网络异常、防火墙未放行本地远程桌面端口、云服务器CPU负载过高等场景均可能导致云服务器无法正常登录。当您的云服务器无法远程登录时&#xff0c;我们建议您首先…

Ajax 缓存

今天遇到ajax缓存的问题,指定同样的url和参数值总是有缓存&#xff0c;跳不到后台程序里&#xff01; 我先用了一种龌龊的方法,就是在url后又加了个由数据数产生的参数var randMath.random();var url"A.aspx?t"escape(t)"&r"escape(rand); 不知道大家…

S5PC100基于I2C子系统的lm75驱动流程图

转载于:https://blog.51cto.com/387929/1312237

如何有效利用碎片时间?这里有个办法

全世界只有3.14 % 的人关注了青少年数学之旅用了这么久微信&#xff0c;关注的公众号没有上千个&#xff0c;也有上百个&#xff0c;但其实大部分每天主动打开的公众号只有寥寥几个。今天就为大家推荐一些颜值与才华并存的好评公众号&#xff0c;希望你喜欢。【关注方式 】1 - …

gRPC四种模式、认证和授权实战演示

前言上一篇对gRPC进行简单介绍&#xff0c;并通过示例体验了一下开发过程。接下来说说实际开发常用功能&#xff0c;如&#xff1a;gRPC的四种模式、gRPC集成JWT做认证和授权等。正文1. gRPC四种模式服务以下案例演示&#xff0c;服务端用微软提供的模板创建&#xff0c;客户端…

ajax mode,DWR的三种Reverse Ajax Mode配置详解

Full Streaming ModeEarly Closing ModePolling Mode在DWR应用中.默认启用的是Full Streaming Mode .它是三种modes中最快的一种.它每60秒检查一次浏览器是否是活跃的.配置很简单:dwr-invokerorg.directwebremoting.servlet.DwrServletactiveReverseAjaxEnabledtrue然后在要使用…

摄像头预览左右翻转_轻薄翻转触控本里的高性能机型:惠普ENVY x360 13评测

自从今年3月末AMD锐龙4000系列处理器正式登陆移动平台以来&#xff0c;目前已有多款机型上市&#xff0c;并涌现出了不少高热度、高性价比的机型。我们也体验测试了其中数款机型&#xff0c;总体上给用户的印象是是价格香、性能强。而今天牛叔要聊的这款机型&#xff0c;也是搭…