日志
天香文章~Discuz用户体验：如何在博文中添加可以在iPad上播放的视频 ...
热度 4 ||
如何在博文里添加可以在iPad和iPhone上播放的视频
通常我们用Discuz软件提供的博文编辑器上的工具栏里的功能来添加视频。这样做有个缺点：Discuz将生成的flash标签的BBCode转换成了阅览器能够理解的html里的Flash object/embed 标签，所以这样的视频只有用Flash播放器才能播放，无法在不支持Flash的机器如iPad和iPhone上观看。一种更好的嵌入方式是将视频加在一个html里的iframe内，让它的文件源指向提供视频的那个网站里的某个合适的地址。这样那个网站就有可能按照你机器的配置决定使用何种播放器。特别是对不支持Flash的机器提供基于html5的播放器。很多多媒体网站如YouTube，优酷，土豆都支持和推荐这种新的嵌入方式。注意在添加之前需要将博文编辑器工具栏里的“编辑源码”打勾，方能在编辑器里直接添加源码。
1）YouTube
这已有网友介绍过(链接)。先简单重述一下。 以下面的视频为例：
2）优酷 以下面的视频为例：
3) 土豆 以下面的视频为例：
下面是用Flash object／embed 标签和iframe标签两种办法显示的同一个视频。在我的台式电脑上，它们看上去完全一样，都是Flash播放器。但从iPad上看只有后一个能看，这说明了用iframe的灵活性，它让视频网站能根据客户端的条件选择不同的播放器。
１２／２３／２０１４补充
用iframe的办法要求提供视频的网站对它提供一定的支持，如果想显示一个存在网上某个地址里的视频文件该怎么办呢？最好的办法是用video/object/embed多层标签来支持不同的浏览器。
下面以心随风舞网友的圣诞快乐视频测试。风舞的圣诞快乐视频测试
帮风舞改了下视频设置，试试是不是有更多的网友可以看到
在object标签外套一层video标签:
<video controls="true">
<source src="http://www.zzwav.com/zzw/upload/up/82/8899cdc.mp4" type="video/mp4" >
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="390" width="520">
<param name="autostart" value="0">
<param name="url" value="http://www.zzwav.com/zzw/upload/up/82/8899cdc.mp4">
</object>
</video>
我试了下，可以在Win7上的Firefox里看到，但不能在WinXP的Firefox里看到。也可以在iPad上看到。
在Samsung Galaxy S3上可以打开，在Samsung Galaxy Ace里点击后在新窗口可见。
详情参见：
http://stackoverflow.com/questions/10488768/playing-mp4-files-in-firefox-using-html5-video
http://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad
