video.js 带有 flv 文件

Question

我正在尝试使用 video.js 播放 flv 文件。到目前为止，我已经包括：

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script>

然后在我体内：

<video id="my-player" class="video-js" controls="" preload="auto" width="640" height="264" poster="" data-setup="{}">
<source src="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" type="video/flv">
</video>

但是，视频未加载且未显示。任何人都有使用 video.js 和 flv 文件的经验，为什么它不起作用？

Answer 1

您需要使用"videojs-flash"插件并将mime类型设置为"video/x-flv"。小心"videojs-flash"插件也用了"videojs-swf"插件

示例 html 文件 video.js v7，支持 flv、hls、rtmp 流。

<!DOCTYPE html>
<html>
<head><meta charset=utf-8 /></head>

<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<link href="//vjs.zencdn.net/7.3/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3/video.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>


<ul id="playlist">
<li data-url="http://podcast.rickygervais.com/rickyandpepe_twitter.mp4">Source 1</li>
<li data-url="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4">Source mp4</li>
<li data-url="http://assets3.ign.com/videos/zencoder/2016/06/15/640/7080c56a76e2b74ec8ecfe4c224441d4-500000-1466028542-w.mp4">Source 3</li>

<li data-url="https://nmxlive.akamaized.net/hls/live/529965/Live_1/index.m3u8" data-type="application/x-mpegURL">TV HLS</li>
<li data-url="http://path /aquila.mkv" data-type="video/mp4">aquila.mkv</li>

<li data-url="rtmp://path" data-type="rtmp/mp4">camera RTMP</li>

<li data-url="http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv" data-type="video/x-flv">testclips.flv</li>   

</ul>

<video id="my-video" class="video-js" controls preload="auto" width="640" height="480"
   data-setup="{}">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video></body>    

<script>
$(function(){
var player = videojs('my-video');

$("#playlist li").on("click", function() {
player.pause();
var src = $(this).attr("data-url");
var type = $(this).attr("data-type");
player.src({src, type})
// set src track corresponding to new movie //
player.load();
player.play();
});
});
</script>


</html>

video.js 带有 flv 文件

video.js with flv file

flv

video.js