Question

在HTML5 / JS应用程序（backbone.js / jQuery）中，我无法嵌入m3u8媒体服务器提供的wowza视频流。

该应用程序应该仅在移动版Safari中运行，因此格式正常。

视频嵌入了由Javascript生成的标记。

<video src="http://someotherdomain.net:[customport]/path/playlist.m3u8" controls>
</video>

在静态测试页面中嵌入带有测试流-URL的视频标记时，视频可以在所有经过测试的iOS版本中完美地运行。

问题是在使用JS生成标记时，视频会在加载状态下停止。

Desktop Safari可以正常播放视频。

我无法弄清楚到目前为止导致这种情况的原因。这可能是移动浏览器的一些安全限制吗？

更新

因为这是一些封闭且相当复杂的应用程序，我很遗憾无法提供非工作示例，但这是将视频标记呈现到页面中的方法：

/**
 * add <video> tag and add source
 *
 * @param src
 */
loadVideoSource: function (src) {

    this.$el.find('video').remove();

    $('<video/>')
        .attr('src', src)
        .prop('autoplay', true)
        .prop('controls', true)
        .css('width', '100%')
        .css('height', '60%')
        .appendTo(this.$el.find('div.video'));

}

该端口确实有效并呈现以下markup：

<video 
    src="https://somedomain.com.tr:1935/live/12345678/playlist.m3u8" 
    autoplay 
    controls 
    style="width: 100%; height: 60%;"
></video>

我还尝试在页面中首先添加视频代码，只需添加src属性或<source>子代。我还尝试在视频元素上明确调用load()和play()，但这也无济于事......

Answer 1

您好我发布了一个我用于视频的小片段。

videoElement = document.createElement('video'); // this audioelement is  used to create an audio tag
$(videoElement )
    .attr('id', 'video');

 function videoElement_Int_fn(currentPos) {

            var src = currentPos+'.mp4';

        videoElement .setAttribute('src', src);
        videoElement .load();
        videoElement .play();
}

Answer 2

好的，经过几个小时的调试后，它简直就是一个CSS错误：P

由于您必须在iOS中明确启动视频，因此您必须在加载标记后按视频中的播放按钮。

奇怪的是，

阻止了这种情况

-webkit-overflow-scrolling: touch;

...用于视频的父容器，并阻止视频元素的原生播放按钮可点击。

m3u8视频，带有动态生成的<video>标记</video>

2 个答案: