Question

我正在尝试通过彩色框加载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文件，我想知道这是否会导致问题。任何帮助都会很棒。谢谢！

Answer 1

很抱歉发布了一个答案，因为这个评论太大了。你有没有机会发布一个jsfiddle？

我头脑中的一些事情：

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

HTML5视频加载，但不播放

1 个答案: