首页

Discuz用户体验：如何在博文中添加可以在iPad上播放的视频--ZT

2015-5-10 19:32| 发布者: admin| 查看: 444| 评论: 1|原作者: admin

摘要: http://www.bian-wang.com/discuz/home.php?mod=spaceuid=10005do=blogid=224原作者：天香公主，彼岸网如何在博文里添加可以在iPad和iPhone上播放的视频通常我们用Discuz软件提供的博文编辑器上的工具栏里的功能来 ...

http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=224

原作者：天香公主，彼岸网

如何在博文里添加可以在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