问题描述

公司后台富文本上传的视频，使用 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 格式的视频就能正常播放了，或者干脆去掉这个属性也行。

文章目录