注册 登录
北美生活网 返回首页

北美生活网的个人空间 http://www.beimeilife.com/?4 [收藏] [复制] [分享] [RSS]

日志

天香文章~Discuz用户体验:如何在博文中添加可以在iPad上播放的视频 ...

热度 4已有 188 次阅读2016-3-3 21:28 |个人分类:站点功能|系统分类:日记随笔| 文章, 如何, 天香, 用户




如何在博文里添加可以在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的灵活性,它让视频网站能根据客户端的条件选择不同的播放器。








12/23/2014补充

用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

1

高兴

感动
1

鲜花
2

漂亮

酷毙

握手

同情

搞笑

刚表态过的朋友 (4 人)

发表评论 评论 (3 个评论)

回复 jc0473 2016-3-3 23:50
看到了,都看到了~~~ 太棒了,谢谢头辛苦了!
回复 北美生活网 2016-3-4 02:46
jc0473: 看到了,都看到了~~~ 太棒了,谢谢头辛苦了!
    
回复 北美生活网 2016-10-1 18:32
今后可以学习/借鉴的---天香的一些有用链接:http://blog.sinovision.net/home/space/uid/70618.html

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册

返回顶部