HTML5 视频加载但无法播放

Question

我正在尝试通过 colorbox 加载 HTML5 文档，该文档播放通过 video 标签添加的视频。视频的链接是：

<a href="content/video/test-video-01.html" class="cboxElement"></a> 

添加颜色框的 JS 是：

var $gallery = $( 'a.cboxElement' ).colorbox({
    transition : 'elastic',
    speed : box_speed,
    maxHeight : 700,
    maxWidth : 900,
    initialHeight : 486,
    initialWidth : 722,
    fixed : true,
    preloading : false,
    onCleanup : function() {
        $( 'canvas#connector' ).fadeOut( box_speed );
    },
    onClosed : function() {
        box_opened = false;
        initiateActivity();
    }
} );


$( 'a.cboxElement' ).click( function( e ) {
    $gallery.eq(0).click();
    return false;
} );

最后，test-video-01.html 看起来像：

<video width="722px" height="487px" controls="controls">
    <source src="http://localhost:8888/ipm/content/video/test-video-01.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://localhost:8888/ipm/content/video/test-video-01.webm" type='video/webm; codecs="vp8, vorbis"' />
    Your browser does not support the video tag.
</video>

我已将 AddType 声明添加到我的 .htaccess 文件中以允许不同的 MIME 类型。

问题是这样的，当我通过 Colorbox 加载内容时，它显示电影和控件；然而，这部电影不会播放。我可以单击电影时间轴并查看电影的不同帧，但它永远不会播放。当我直接访问 test-video-o1.html 文件时，它工作得很好。 Colorbox 发出 AJAX 请求来获取 HTML 文件，我想知道这是否会导致问题。对此的任何帮助都会很棒。谢谢！

Answer 1

抱歉作为答案发布，因为这对于评论来说太大了。
你有机会发布 jsfiddle 吗？

我想到了一些事情：

1. 当您使用 autoplay 属性时会发生什么？
2. 您是否对视频进行了编码，以便 mp4 版本具有“faststart”/
   moovatom/优化流媒体启用？
3. 您是否在服务器上运行了部分内容标头（206
   响应..通常会导致问题）
4. 尝试将 js 侦听器附加到“canplaythrough”元素
   事件查看是否记录。