0

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

该应用程序应该只在移动 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()但这也无济于事......

4

2 回答 2

0

嗨，我正在发布一个小片段，我总是将其用于视频..

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();
}
于 2013-09-24T08:47:57.537 回答
0

好的，经过数小时的调试，结果证明它只是一个 CSS 错误：P

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

奇怪的是，这被阻止了

-webkit-overflow-scrolling: touch;

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

于 2013-09-25T10:53:16.880 回答