HTML5 视频加载，但不播放答案

【问题标题】：HTML5 Video Loading, but Not PlayingHTML5 视频加载，但不播放
【发布时间】：2011-10-20 15:32:03
【问题描述】：

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

<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 文件，我想知道这是否会导致问题。对此的任何帮助都会很棒。谢谢！

【问题讨论】：

标签： html5-video colorbox

【解决方案1】：

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

我脑子里想的几件事：

使用autoplay 属性时会发生什么？
您是否对视频进行了编码以使 mp4 版本具有“快速启动”/ moov atom / 已针对流媒体进行了优化？
您是否在服务器上运行了部分内容标头 (206 响应..经常导致问题）
尝试将 js 侦听器附加到“canplaythrough”元素事件看看它是否记录。

【讨论】：