修复

Question

我正在尝试在我的网站上嵌入video.js视频播放器。我正在用jquery-1.10.2运行debian 7.5 / chrome / IceWeasel（雷鸟）站进行测试。

等待功能

播放列表索引中的视频。

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

<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
WEBM
ogg（ogv extension）

然后在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选项对视频进行编码。视频比特率不得超过链路容量，视频显示必须尽可能平滑。

我经过几天的测试后发现了这个设置，最终满足了我的需求......并且还为你的设备打了个招呼。

我使用.mp4格式作为我的Contour相机提供的输入，但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源代码也经过重新编码，可以通过Web浏览器插件使用并且耐用。编码是一项巨大的CPU任务。

希望有所帮助。

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

1 个答案:

修复