Menu
I have an html5 video that should work on ipad. Controls must be hide and on user tap on the ipad, the html5 video must play.
I am using html5video.js What I can see on ipad is only the poster image and when I tap the ipad, nothing happens. below is my code
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script>
var video = document.getElementById('video');
video.addEventListener('touchstart',function(){
video.play();
},false);
</script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" preload="auto" width="620" height="860" poster="img/poster.png" data-setup="{}">
<source src="video/Motion.mp4" type='video/mp4'>
</video>
</body>
</html>
818
Enable the developer options for safari and change the user agent on safari for ipad. After this safari will play the html5 video file.
If your browser error "HTML5 video file not found", it means that your browser is not up to date or website pages does not have a suitable video codec. It would help if you communicated with the developer to solve the issue and install all the required codecs.
Are you serving the video with the correct MIME type? The excellent Video On The Web article by Dive Into HTML 5 covers everything you need to know about serving Video. Way down the bottom of the article (past all the encoding help) covers issues with iPhones and iPads as well as the need for the correct MIME type. It's well worth the full read.
EDIT
To work with iOS the Accept-Ranges: bytes HTTP response header must be included, see: Safari Web Content Guide - Configuring Your Server
103
Try this trick (void user to tap screen):
document.addEventListener('touchstart', function(event) {
video.play();
// They use this first touch/click event for buffering others video.
// with this trick
video2.play();
video2.pause();
// After in your program you can call from 'code' play video.
// Sum of success buffering per one click is 3 ~ 6 ( android or ios ).
}, false);
For me works on android tablet samsung , iphone and ipad 2/3.
Updated :
With new version of browsers also autoplay is enabled by default, you need to put attribute mute for success.
There is no final solution. For example firefox version 64 on mac don't support but same version on linux support autoplay. And so long...
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
