HTML5視頻無法在iPad中播放.appendTo或.detach後

我遇到了一個有趣的問題，我的視頻在.appendTo或.detach之後無法在iPad中播放。它提供了一個播放按鈕，但是當播放按鈕被按下時，沒有任何反應。HTML5視頻無法在iPad中播放.appendTo或.detach後

的jsfiddle http://jsfiddle.net/LHTb5/1/

HTML

<video id="video1"> 
    <source id="mp4" src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4" type="video/mp4"/> 
</video> 


<div id="new"></div>

的Javascript

$(document).ready(function(){ 
    $("#video1").appendTo($("#new")); 
});

編輯

好的人們，對於什麼是工作，什麼不是，一直存在一些混淆。讓我真的很容易。

http://jsfiddle.net/LHTb5/2/ < ---工作

http://jsfiddle.net/ecbUP/ < ----不起作用

不具有任何與HTML，標籤，或自動播放。這只是一個讓iPad無法玩的簡單東西。我只是想知道爲什麼，或者如何做.appendTo或.detach，並使其工作。

來源

2012-12-11 Benjamin Powers

請問視頻直接從IPAD播放？ – Amitd

你爲什麼要添加到視頻元素？你是否添加新的來源？ – nycynik

有趣的問題。 –

有確實似乎是移動video tag一個問題。重建整個視頻標記是一個解決方案，它可以工作（see fiddle）

$(document).ready(function(){ 
    var tt = $('<video/>', { 
     id: 'video2', 
     'autobuffer' : 'autobuffer', 
     'controls' : 'controls', 
     'autoplay' : 'autoplay', 
     html   : $('<source />', { 
      'src' : 'http://media.w3.org/2010/05/sintel/trailer.mp4', 
      'type' : 'video/mp4'  
     }) 
    }); 
    $("#video1").remove(); 
    tt.appendTo($('#new')); 
});

我用硬編碼值組裝新的視頻標籤，但你可以使用.attr()上的視頻標籤和源得到的值來自標籤。我知道這不是解決問題appendTo()。

出於完整性：在測試了iPad2的 - iOS4.3.3/iPod的5 - iOS6.0.1/iPod的5 - 適用於iOS 7

編輯：更新了小提琴視頻鏈接和iOS7

測試

來源

2012-12-20 08:14:30

不直接回答問題，但確實回答了即將發生的後續問題。 +1 – SnareChops

@bart完美，謝謝。 –

歡迎使用特殊的Web應用程序在日常的基礎上工作，並運行到這些類型的東西。 –

試試這個：

$(document).ready(function(){ 
    $("#video1").appendTo("#new"); 
    $('#video1').get(0).play(); 
});

來源

2012-12-14 15:31:18

在iPad上無法使用。 http://jsfiddle.net/hwH8h/ –

自動播放不能在iPad上運行。

Can you autoplay HTML5 videos on the iPad?

如果要播放視頻，你可以這樣添加它（不<源>）：

<video controls src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4"></video>

jsfiddle

在我的項目我還能保持這樣的：

  ... 
      initVideoPlayer: function(id) { 

       var firstvideo='foo.mp4'; 
       this.embeddVideoPlayer(firstvideo); 
      }, 

      embeddVideoPlayer: function(videoFile) { 
       this.setupVideoPlayer(videoFile); 
       this.appendVideoPlayer(); 
      }, 

      /** Setup Video-Player with Size 950px x 406px */ 
      setupVideoPlayer: function(videoFile) { 
       this.videotag = document.createElement('video'); 
       this.videotag.src = videoFile; 
       this.videotag.height = "406"; 
       this.videotag.width = "950"; 
       this.videotag.seekable = true; 
      }, 

      /** Setup Video-Player to DOM, */ 
      appendVideoPlayer: function() { 
       var node = document.getElementById('new'); 
       this._removeChildNodes(node); 
       node.appendChild(this.videotag); 

      }, 
      _removeChildNodes: function(node) { 
       while (node.hasChildNodes()) { 
        node.removeChild(node.lastChild); 
       }; 
      }, 
      ....

每ti我開始一個視頻，我必須調用embeddVideoPlayer（videoFile）。

來源

2012-12-17 07:57:14 Sam

嗨，山姆。不幸的是，我的問題不是關於自動播放。我會清理html以免混淆。如果您嘗試在iPad上運行jsfiddle，您會注意到，即使點擊播放按鈕後，視頻也不會播放。 –

這就是爲什麼我改變了源代碼。看到我的jsfiddle：http://jsfiddle.net/RHuuU/ – Sam

嗨，山姆。 jsfiddle（jsfiddle.net/RHuuU）不能在iPad上播放。 –

我認爲你可以找到你在這個環節的解決方案： How do I embed a mp4 movie into my html?

通過我試過的jsfiddle在我的iPhone的方式現在看來，這是不兼容的。根本沒有控制。

@BenjaminPowers 您是否嘗試在video標記中添加controls="controls"？

編輯：

我想，我終於得到了解決，你可以確認您使用的是正確的文檔類型爲HTML5象下面這樣：

<!DOCTYPE html> 
<html>

下面是從W3Schools的代碼：

<!DOCTYPE html> 
<html> 
<body> 

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"/> 
    <source src="movie.ogg" type="video/ogg"/> 
    Your browser does not support the video tag. 
</video> 

</body> 
</html>

我試過我的iPhone上的下面的鏈接，它工作正常，視頻變得充分scrine，你將使用IOS控件：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

來源

2012-12-19 18:43:58

是的，不幸的是，似乎沒有變化的HTML似乎幫助。（doctypes，源標籤與src屬性，不同的視頻類型等）。視頻在它自己的播放罰款，它只是上面的JavaScript，將導致它無法播放。 –

@BenjaminPowers我有點困惑，是在iPad上播放視頻嗎？究竟是什麼問題，因爲IOS設備的默認自動加載是停用的？你想讓你的視頻循環嗎？你到底想用JavaScript來做什麼？ –

除非將.appendTo或.detach應用於代碼，否則這只是視頻工作的一個簡單問題。原來的jsfiddle很好地顯示了這個問題。註釋掉javascript，它不會有任何問題。離開JavaScript，iPad將無法再播放視頻。 –

HTML5視頻無法在iPad中播放.appendTo或.detach後

回答

相關問題