如何在 chrome 中使用 video.js 播放 flash(.flv) 视频

Posted 2023-05-08

【中文标题】如何在 chrome 中使用 video.js 播放 flash(.flv) 视频

【英文标题】：how to play flash(.flv) video using video.js in chrome

【发布时间】：2015-12-11 07:57:49

【问题描述】：

我正在使用 video.js 播放 flash(.flv) 视频。但是当我按下播放按钮时它不播放视频？ 我用过"techorder:"["flash","html"]。但这并没有什么不同。videojs 中是否有用于 Flash 视频的插件？如何在video.js 中播放 .flv 视频？

【参考方案1】：

您应该使用 flv.js，这是一个用纯 javascript 编写的 HTML5 FLV 播放器。不需要 Flash。

https://github.com/Bilibili/flv.js

您可以制作一个源处理程序以将flv.js 与video.js 集成

【参考方案2】：

video.js 可以在 Flash 技术中播放 FLV。

如果您是自托管 video.js 而不是使用 CDN，请确保您的 swf 的路径正确，例如

<script>
  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
</script>

确保在源标签中使用正确的video/x-flv mime 类型：

<source src="http://example.com/video.flv" type='video/x-flv'>

托管 FLV 的服务器还必须在“Content-Type”标头中返回正确的 mime 类型。

示例：http://output.jsbin.com/juvuca

【讨论】：

它在我的本地文件中不起作用。 jsbin 输出示例工作正常。请指导我如何为本地文件解决此问题

定义本地文件。 video.js 的修改副本，flv 从 file:// 提供，还有什么？最小测试用例的代码或链接会有所帮助。

它在 localhost 上工作正常，但在 c9.io 上不工作，请帮助解决这个问题。我正在使用节点 js。

我已经尝试过了，但没有工作。将我的页面与给定示例进行比较时，我注意到视频标签已替换为对象标签（在示例页面中），但在我的情况下并没有发生。任何人都可以帮助我了解我所缺少的！

打开远程html文件的时候还能播放flv，很奇怪。我保存远程html并在本地打开后，只有一个巨大的播放按钮，没有其他任何事情发生。 File on jsbin.

【参考方案3】：

你可以在这里找到插件 -https://github.com/videojs/video.js/wiki/Plugins 不确定这是否可行。

如果不试试这个 -http://jsfiddle.net/N8Zs5/18/

问候， 沙市

【参考方案4】：

两种方式。

纯 html5 技术。您可以按照用户@xqq 的建议使用flv.js。您可能需要videojs-flvjs 将flv.js 与video.js 集成在一起。

Flash 技术。您必须安装 videojs-flash 才能使用 video.js。

您可以选择其中一种来支持播放 flv 视频。此外，您可以同时使用它们并通过techOrder 选项指定它们的顺序。

data-setup='"techOrder":["html5", "flvjs", "flash"]'

【参考方案5】：

这个项目可以帮助你，https://github.com/mister-ben/videojs-flvjs

<!-- Video.js -->
<link href="//path/to/video-js.css" rel="stylesheet">
<script src="//path/to/video.min.js"></script>
<!-- flv.js -->
<script src="//path/to/flv.min.js"></script>
<!-- videojs-flvjs -->
<script src="//path/to/videojs-flvjs.min.js"></script>
<video id="videojs-flvjs-player" class="video-js vjs-default-skin" controls>
  <source src="movie.flv" type='video/x-flv'>
</video>
<script>
  // For v5 the tech must be added to the tech order.
  // For v6 this is not needed.
  videojs('videojs-flvjs-player', 
    techOrder: ['html5', 'flvjs'],
    flvjs: 
      mediaDataSource: 
        isLive: true,
        cors: true,
        withCredentials: false,
      ,
      // config: ,
    ,
  );
</script>

【参考方案6】：

我重构了 videojs-flvjs 以兼容 es6 模块。 https://www.npmjs.com/package/videojs-flvjs-es6