带有动态生成m3u8标签的<video>视频

Question

在HTML5 5/JS应用程序(backbone.js / jQuery)中，我很难嵌入由wowza媒体服务器提供的m3u8视频流。

这个应用程序应该只在移动safari中运行，所以格式是可以的。

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

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

当在静态测试页面中嵌入带有测试流-URL的视频标记时，视频在所有测试的iOS版本上和下完美地工作。

问题是当使用JS生成标记时，视频处于加载状态.。

不过，桌面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

好的，经过几个小时的调试，它只是一个CSS bug :P

因为您必须在iOS中显式地启动视频，所以在加载标记之后，您必须按下视频中的play按钮。

奇怪的是，这件事被

-webkit-overflow-scrolling: touch;

...which在视频的父容器上使用，防止了视频元素的本机播放按钮可点击。

Answer 2

嗨，我贴了一个小片段，我经常用它来做视频。

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();
}