HTML5 video unable to playback in iPad after .appendTo or .detach
Question
I'm running into an interesting issue where my video is unable to play back in iPad after .appendTo or .detach . It presents a play button, but when the play button is pressed, nothing happens.
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"));
});
Edit
Ok folks, there's been some confusion as to what's working, and what is not. Let me make it really easy.
http://jsfiddle.net/LHTb5/2/ <--- works
http://jsfiddle.net/ecbUP/ <---- doesn't work
Doesn't have anything to do with html, tags, or autoplay. It's just a dead simple thing that makes iPad not play. I'm just wondering why, or how to do an .appendTo or .detach and have it work.
4 answers
solution1
7 ACCPTED 2012-12-20 08:14:30
There indeed seems to be a problem with moving the video tag . Rebuilding the entire video tag is an solution that can work ( 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'));
});
I used hard-coded values for assembling the new video tag, but you can use .attr() on the video tag and the source to get the values from the tag.
I am aware this is not solving the problem with appendTo() .
For completeness: Tested on iPad2 - iOS4.3.3 / iPod 5 - iOS6.0.1 / iPod 5 - iOS 7
EDIT : Updated video link in fiddle and tested on iOS7
solution2
0 2012-12-14 15:31:18
Try this:
$(document).ready(function(){
$("#video1").appendTo("#new");
$('#video1').get(0).play();
});
solution3
0 2012-12-17 07:57:14
Autoplay doesn't work on iPad.
Can you autoplay HTML5 videos on the iPad?
If you want to play a video, you can add it like this (without < source>):
<video controls src="https://s3.amazonaws.com/s3hub-1b3c58271cb3e0dfa49d60cae0ac8b86ade30aed6294bdb5fe682e2bf/HTML5/sintel_trailer-480.mp4"></video>
In my project i make it like this:
...
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);
};
},
....
every time i start a video, i have to call embeddVideoPlayer(videoFile).
solution4
0 2012-12-19 18:43:58
I think you can find you solution in this link: How do I embed a mp4 movie into my html?
By the way I tried jsfiddle on my iphone it seems it is not compatible. no controls at all.
@BenjaminPowers Did you try to add controls="controls" in your video tag ?
Edit:
I think I finally got the solution, could you confirm that you are using the correct doctype for html5 like below:
<!DOCTYPE html>
<html>
Here is a code from 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>
I tried the below link on my iPhone and it worked fine, the video goes full scrine and you will be using IOS controls:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.