You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

因旧教程播放器失效,如何在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属性会让浏览器显示默认的播放、暂停、音量等控件
  • widthheight可根据需求调整尺寸
  • 转格式用免费的视频转换工具就能搞定,操作很简单

如果必须处理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

火山引擎 最新活动