问题描述

公司后台富文本上传的视频,使用 embed 标签来展示播放视频。但是在前端却无法播放该 mp4 格式的视频,视频内容区显示一片空白。

富文本中的 embed 代码:

<embed src="http://lejiao1688.oss-cn-hangzhou.aliyuncs.com/202003/19/1352069072200.mp4" type="application/x-shockwave-flash" width="550" height="400" autostart="false" loop="true"></embed>

解决方案

对于 embed 标签并不熟悉,在自己学习 HTML 的时候,早就是 HTML5 的标准了,视频播放一般会使用 video 标签。所以摆在眼前的有几条路可选:

  • 更新富文本编辑器到可以使用视频上传功能为止
  • 不管富文本编辑器,在输出富文本时将 embed 替换成 video
  • 研究一下 embed 标签,找出无法播放 MP4 视频的原因

第二个方案最简单,在输出富文本内容时对其进行字符替换 str_replace('embed', 'video')。但没办法,太没挑战性了,人活着总喜欢问为什么,总想知道为什么。那就研究一下究竟是什么原因造成 embed 无法播放 MP4 视频的吧!

网上查了一下,毋庸置疑的是,embed 标签肯定是可以播放视频的,一般还会和 object 放在一起做比较。在 HTML5 标准之前,object 标签是对 windows 下 IE 浏览器播放视频、执行应用的一个标签,而 embed 适配其他类型的浏览器。

比较久远之前的视频播放用法

<object>
    <embed src="http://www.runoob.com/try/demo_source/movie.mp4" width="200" height="150" >
</object>

embed 标签一般用法

<embed src="1352069072200.mp4" width="400"  height="800">

object 标签一般用法

<object width="400" height="800" data="1352069072200.mp4"></object>

(现在)video 标签一般用法

<video src="1352069072200.mp4" controls="controls" autoplay="autoplay" loop="loop" width="380" poster="images/video_poster.jpg">
    您的浏览器不支持 video 标签。
</video>

对比发现,公司用的视频播放标签多了一个 type="application/x-shockwave-flash" 属性,了解了一下,application/x-shockwave-flash 是Flash(网上的一种动画)的MIME格式代码,播放 swf 格式的 flash 动画还好,播放 MP4 格式的视频当然会失败。

可以修改 type 属性 为 video/mp4 ,这样 MP4 格式的视频就能正常播放了,或者干脆去掉这个属性也行。