I'm sorry if this question has already been asked, but i didn't find a working solution.
We have website with a Vimeo video on it. But it doesn't work on iPad.
I tested in windows firefox and in Google chrome. It worked fine there.
Following is embed iframe code which I am using right now.
<iframe id="vimeo-video" src="https://player.vimeo.com/video/198187623?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="360" frameborder="0"> </iframe>
What is causing this ? Need Guidance.
Thanks.
The
following the video id in the iframe src is interfering with the Player being rendered. When that part of the uri is removed, the player works as expected.
Tested with an iPad Mini 2 w/ iOS 10.2
I have an Angular app displaying a video like this:
<video ng-if="videoToPresent.shouldShow" width='640' height='360' controls autoplay>
<source ng-src="{{videoToPresent.url}}" type="video/mp4" />
</video>
This worked perfectly on mobile Safari until the new iOS 10 update. Now, it renders the video poster and the play button in the center, but it does nothing upon clicking the play button.
I read an article in WebKit's blog describing how use of the playsinline attribute is supported, so I tried adding that as well but without any success.
Anyone know what's going on with the new update? Thanks!
I am using JWPlayer with an HLS file that contains subtitles. However, when I play this file on an iPhone or other iOS device, it chops off the subtitles:
Is there a way to raise the height of the subtitles on a mobile device? The HLS file I have is:
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",FORCED=NO,AUTOSELECT=YES,URI="en-sub.m3u8",LANGUAGE="en"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish",FORCED=NO,AUTOSELECT=YES,URI="es-sub.m3u8",LANGUAGE="es"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="English",DEFAULT=YES,AUTOSELECT=YES,LANGUAGE="en",URI="en.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="French",DEFAULT=NO,AUTOSELECT=YES,LANGUAGE="fr",URI="fr.m3u8"
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="aac",NAME="Italian",DEFAULT=NO,AUTOSELECT=YES,LANGUAGE="it",URI="it.m3u8"
#EXT-X-STREAM-INF:PROGRAM-ID=1,NAME="SD",BANDWIDTH=256000,SUBTITLES="subs",AUDIO="aac"
SD.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,NAME="HD",BANDWIDTH=768000,SUBTITLES="subs",AUDIO="aac"
HD.m3u8
This is actually something that we have a ticket for (as well as submitted a ticket to Apple), to fix. It only seems to affect iOS8, as iOS7 is fine.
Issue is related to -webkit-transform: scale on the video tag.
Try to add the following style to your player div to see if this will fix it.
style="-webkit-transform: scale(1, 1);"
If that does not work, try:
style="-webkit-transform: scale(1, 1) !important;"
You might need to double nest the divs and apply the style to the outer div, like so:
<div style="-webkit-transform: scale(1, 1) !important;"><div id="player"></div></div>
You can also try to apply the style just to the player div, and not use an outer div.
I've been frustrated by trying to get an HTML5 video to play on an iPad. At first, I assumed it was a codec problem, but even after following all advice I could find on the internet to fix it, it still wasn't playing. However, I realized that it's not a problem with the codec, as shown by this: the video doesn't render inside the main page, but if I go to the link where the media file is stored, it does show. Here's the offending code:
<video autoplay loop controls id="hipplay-video" class="video-top">
<source src="wp-content/uploads/2013/05/Hipplayapple.mp4" type="video/mp4" />
<source src="wp-content/uploads/2013/05/Hipplaywebm.webm" type="video/webm" />
<source src="wp-content/uploads/2013/05/Hipplayogg.ogg" type="video/ogg" />
Your browser does not support the HTML5 video tag.
</video>
If you have an iPad and you go to http://www.hipplay.com - the video at the top does not play. However, if you visit http://www.hipplay.com/wp-content/uploads/2013/05/Hipplayapple.mp4, the video plays just fine.
Any ideas what I'm doing wrong or how I can fix it?
It turns out that iOS does not like when you insert your own controls with JavaScript AND doesn't like it when you autoplay videos. When I turned those features off (using a poster instead), everything worked as expected.
The document has a number of divs only one of which is visible at any one time (others are display:none).
When a div which was visible is hidden and then made visible again the videos within the div don't play any more.
However this is only a problem on iPad.
Any suggestions as to how to re-initialise them?
thanks
Derek
Having searched in every possible way for a solution it does seem that videos using video.js in a container that is hidden after video.js has initialised them become unplayable when made visible again.
So for now, when my pages detect that the browser is on iPad/iPhone they use the native video player.
To do this I place the includes for the video.js inside a javascript block in the head of the page so they are not loaded if iPad or iPhone is detected.
<script type="text/javascript">
if(!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
document.write('<link href=\"\/\/vjs.zencdn.net/c/video-js.css\" rel=\"stylesheet\" type=\"text/css\" \/\>');
document.write('<script src=\"\/\/vjs.zencdn.net/c/video.js\" type=\"text/javascript\"\>\<\/script\>');
}
</script>
I had this problem on firefox but it was because I was trying to stop the video after move its container div to a hidden div. I removed the "stop" code, the player seems to reinitalize?(and stop by itself) after being moved from one div to another on chrome, firefox and opera.
Before this simple solution, I thought to just re-add the video original html via javascript, it probably can be done after the div is hidden or before it is shown.