VIDEO.JS - 暂停/停止命令后播放器仍在流式传输

Question

我正在尝试在我的网站上嵌入 video.js 视频播放器。我正在运行带有 jquery-1.10.2 的 debian 7.5 / chrome / IceWeasel (thunderbird) 站进行测试。

期待的功能

从列表索引播放视频。

我列出了目录中包含的视频文件，将每个文件的超链接设置为：

<a class="IndexItem" href="#" id="404467" type="video/mime-type" data-video="video-file_name.mp4">My video #1</a>
....

点击事件由 javascript 代码管理。

点击视频索引时，会动态创建相应的源标签并加载视频播放器。

问题

视频已成功加载并播放，但是当我单击播放器停止按钮时，进度条仍会向前移动，直到到达流的末尾。

我该如何解决这个问题？

代码摘录

html

<video class="video-js vjs-default-skin" height="480" id="video-player" width="640" poster="/images/bubble-logo.png">
 <source src="/path/to/my/video" type="video/mime-type"/>
 <h3>Your browser does not support the video tag</h3>
</video>

video/mime_type 可以是 video/mp4、video/webm 或 video/ogg

javascript

$(document).ready(function() {

    //---------------------
    // Edit click event
    //---------------------

    $.each($(".IndexItem"), function(){

        $(this).click(function(event){

            event.preventDefault();

            // href data-video attribute contains the video file name
            // href type attribute contains the video mime-type
            var filename = $(this).attr("data-video");
            var mime = $(this).attr("type");            

            // removing previous sources
            $('#video-player').empty();

            playVideo(filename, mime);

           }); 
    });    

});


function playVideo(filename, mime) {

    // set set html source tag inside the video player div
    loadSource(filename, mime);

    videojs("video-player", {"controls":true}, function(){
      // Player (this) is initialized and ready.
    });

}

function loadSource(filename, mime){

    var source = $('<source src="/videos/' + filename + '" type="' + mime + '"/>');
    $('#video-player').append(source);

    var warning = $('<h3>Your browser does not support the video tag</h3>');
    $('#video-player').append(warning);

    console.log("Creating new source :" + source);

}

也许我的方法不是正确的，因为我为每个请求创建了一个视频播放器实例（似乎不是很干净......）。假设不是，关于我的问题的问题仍然相关，因为它在我重新加载页面后第一次尝试打开视频时提出。

提前感谢您的帮助。

Answer 1

修复

这是我的 ffmpeg 视频文件的编码问题，坦率地说，我不记得究竟是什么问题，但现在一切正常！

第一件事：为确保最广泛的合规性，建议以三种不同格式对您的原始视频进行编码：

• mp4
• 网站
• ogg（ogv 扩展）

然后在 html 标记中将它们声明为

<video height="480" id="video-1" width="640" poster="/images/video-1.jpg" controls="true" preload="true"><source src="/videos/video-1.ogv" type="video/ogg"/><source src="/videos/video-1.webm" type="video/webm/><source src="/videos/video-1.mp4" type="video/mp4"/><h3>Your browser does not support the video tag</h3></video>

/videos 必须是映射到 /path/to/ 的静态 Web 服务器（见下文）

更困难的事情是使用正确的 ffmpeg 选项对视频进行编码。视频码率不能超过链路容量，视频显示尽量流畅。

经过几天的测试后，我发现了这个设置，最终满足了我的需求......并且也符合你的需求。

我使用 Contour Camera 提供的 .mp4 格式作为输入，但 ffmpeg 应该转换任何其他已知格式。

检查可用的可成形类型：

$ ffmpeg -formats

要使用多个输出对我的视频进行编码，我运行

$ ffmpeg -i camvideo.mp4 -c:v libvpx -c:a libvorbis -s 4cif -b:v 256K -f webm /path/to/video-1.webm
$ ffmpeg -i camvideo.mp4 -c:v libx264 -s 4cif -preset slow -bufsize 4M -maxrate 256K -tune fastdecode,zerolatency -c:a copy -b:a 16K -f mp4 path/to/video-1.mp4
$ ffmpeg -y -i $1 -codec:v libtheora -s 4cif -qscale:v 7 -codec:a libvorbis -qscale:a 3 -f ogg  /path/to/video-1.ogv

请注意，我的环境是 Debian 7.5 和 ffmpeg 2.2.2（从源代码编译），结果可能与您的 ffmpeg 版本不同......我认为。

注意：mp4 源代码也经过重新编码，以使其可供网络浏览器插件使用，请耐心等待 .. 编码是一项巨大的 CPU 任务。

希望对您有所帮助。