因旧教程播放器失效,如何在HTML中嵌入带播放器的FLV/SWF?
如何在HTML中嵌入带播放器的FLV或SWF文件
嘿,我太懂你跟着旧书学习踩坑的感受了——那些几年前流行的工具说停更就停更,连资源都找不到,真的闹心。针对你的需求,结合现在的浏览器生态,我给你几个实用的方案:
优先选择:用HTML5视频替代Flash(强烈推荐)
首先得明确:Flash已经被所有主流浏览器彻底弃用了,包括Chrome、Firefox、Safari这些,现在几乎没人用它做视频播放了。所以最稳妥的办法是把FLV/SWF里的视频内容转成MP4格式(当前通用的视频格式),然后用HTML5的<video>标签直接嵌入,自带原生播放器,兼容性拉满。
示例代码:
<video controls width="640" height="360"> <source src="your-converted-video.mp4" type="video/mp4"> 你的浏览器不支持HTML5视频播放功能 </video>
controls属性会让浏览器显示默认的播放、暂停、音量等控件width和height可根据需求调整尺寸- 转格式用免费的视频转换工具就能搞定,操作很简单
如果必须处理FLV文件(不想转格式)
要是手头只有FLV文件,不想转格式,可以用基于HTML5的开源播放器库来支持FLV播放,不需要依赖Flash。比如用Video.js搭配FLV.js插件(把这两个库的文件下载到本地项目里引入即可):
示例代码:
<!-- 先引入播放器的CSS和JS文件 --> <link rel="stylesheet" href="path/to/video-js.min.css"> <script src="path/to/video.min.js"></script> <script src="path/to/flv.min.js"></script> <!-- 嵌入视频 --> <video id="flv-player" class="video-js" controls width="640" height="360"> <source src="your-video.flv" type="video/x-flv"> </video> <script> // 初始化播放器,启用FLV解码支持 var player = videojs('flv-player', { techOrder: ['html5', 'flvjs'] }); </script>
这种方案的兼容性和体验都比Flash好太多,而且符合现在的Web标准。
关于SWF文件的嵌入(仅特殊场景使用)
如果是要嵌入SWF格式的交互内容(比如老的小游戏、动画),现在只有极少数浏览器(比如专门保留Flash支持的旧版浏览器,或者一些小众浏览器)能运行它,还需要用户手动开启Flash支持,非常不推荐。如果实在要试,可以用<object>和<embed>标签的组合做兼容:
示例代码:
<object type="application/x-shockwave-flash" data="your-content.swf" width="640" height="480"> <param name="movie" value="your-content.swf"> <param name="quality" value="high"> <!-- 备用的embed标签,兼容旧浏览器 --> <embed src="your-content.swf" quality="high" type="application/x-shockwave-flash" width="640" height="480"> </object>
再次提醒:这个方案现在几乎无法在现代主流浏览器中正常运行,尽量考虑把SWF内容迁移到HTML5技术栈(比如用Canvas、WebGL或者JavaScript重写)。
内容的提问来源于stack exchange,提问作者Connor Boyd




