動態生成的m3u8視頻<video>標記

在HTML5/JS應用程序（backbone.js/jQuery）中，我無法嵌入由wowza媒體服務器提供的m3u8視頻流。動態生成的m3u8視頻<video>標記

該應用程序應該只在移動Safari瀏覽器中運行，因此格式將是好的。

該視頻嵌入了由Javascript生成的標籤。

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

當嵌入在一個靜態測試頁的測試數據流的URL的視頻標籤，視頻作品完美上下所有測試的IOS版本。

問題是當用JS生成標籤時，視頻在加載狀態下失速。

桌面Safari然而播放視頻就好了。

我無法弄清楚到目前爲止導致這種情況的原因。這可能是移動瀏覽器的一些安全限制嗎？

UPDATE

，因爲這是一些封閉的且相當複雜的程序，我很遺憾的是沒有能夠提供一個非工作的例子，但這個是呈現視頻標籤到頁面的方法：

/** 
* 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()明確視頻元素上，但是這並沒有幫助...

來源

2013-09-24 Max Girkens

嗨，你可以分享一部分的JS你寫了可能是一個小提琴.. – codebreaker

不幸的是，但我更新了一個代碼段的答案... –

好吧，經過幾個小時的調試後，它簡直是一個CSS錯誤：P

由於您必須在iOS中明確啓動視頻，您必須在加載標記後按視頻中的播放按鈕。

奇怪的是，這是由

-webkit-overflow-scrolling: touch;

...這是視頻的父容器上使用，並且阻止了視頻元素的本地播放按鈕，可以點擊阻止。

來源

2013-09-25 10:53:16

嗨我張貼小片段，我總是用視頻..

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-24 08:47:57 codebreaker

這應該如何幫助我的問題？ –

K I已經得到笏ü需要檢查出的小提琴.. http://jsbin.com/ayutUPa/1/edit – codebreaker

不幸創建視頻標籤這種方式，不改變行爲......我還是謝謝你，但！ –

動態生成的m3u8視頻<video>標記

回答

相關問題