I have a video display issue on this page of my site, only when viewing on iOS mobile devices.
The strange thing is that I have another video element on the same page and that one plays fine. Same format, same css, html, attributes, etc. Both videos were rendered in AE with the same settings, so codecs are also the same.
Here is the section of code containing both videos:
<div id="sec-04" class="project-section">
<div class="projectvid" id="wipeAnim">
<video preload playsinline autoplay loop muted><source src="/assets/truChef_wipeAnimation_16x9.mp4" type="video/mp4"></video>
</div>
</div>
<div id="sec-05" class="project-section">
<div id="imgCont-05" class="projectimg"><div id="img-05" class="img"></div></div>
</div>
<div id="sec-06" class="project-section">
<div class="projectvid" id="explodedAnim">
<video preload playsinline autoplay loop muted><source src="/assets/truChef_explodedView_16x9.mp4" type="video/mp4"></video>
</div>
</div>
Note:
Both videos play fine in Chrome Dev tools device simulation.
Both videos do not play at all in browserstack.com's real cloud iPhones.
On my actual iPhone 6, the first video (id="wipeAnim") is not playing,
the second video (id="explodedAnim") is playing.
Does anybody know why this first video isn't playing/showing up at all on iOS? I can't figure it out - it just doesn't make sense to me.
Related
I’m linking to a video on my web site that’s hosted on youtube. It was playing fine, however now it does not seem to play. There was a flashing black circle in the upper left corner for a while. Now when I click the play button, nothing happens.
I can say that I did add a responsive div to show what properly on mobile devices, but that did not fix it initially. I’m not sure if I also need to wait for to come back.
Is there something I might need to change in my YouTube settings? If anyone knows what I need to do to resolve this issue, I would very much appreciate it.
<div class="col-md-12 hidden-xs">
<center>
<iframe width="480" height="270" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class="col-xs-12 hidden-md hidden-sm hidden-lg">
<center>
<iframe width="280" height="160" src="https://www.youtube.com/embed/1LohCR8Nj00?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
You can only have a video once on a page apparently. i corrected the css to be responsive and now it works
<div ng-show="showVideo">
<video id="objvideo" ng-src="{{videoURL}}" class="col-xs-12" style="float:none" controls>
<source type="video">
</video>
</div>
I have the above code in my html file to show a video which has been uploaded. The problem is only in Ipad I am not getting a thumbnail preview for the video. It just shows a play button. The video plays and function perfectly, but the preview doesnt come up.
When I opened same page in chrome in my desktop and emulated Ipad , I am not able to repro.
You dont need the {{}} in ng-src
Only when you say src="{{myVar}}"
Or try removing the ng-src since you already have a source tag
you should use and remove ng-src="{{videoURL}}" from video tag and add it into source tag
I have a youtube video embedded on my landing page (focus.brainbeat.com/adhd). It works just fine on desktop and on Android phone but it does not play on iPhone or iPad. Below is the code that's being used...
<div class="Lightbox Lightbox--demo" id="demo">
<div class="Lightbox-wrapper">
<p class="Lightbox-close">Close</p>
<iframe id="demo-iframe" src="https://www.youtube.com/embed/058eNc41xVk?wmode=opaque&version=3&enablejsapi=1" height="450" width="800" allowfullscreen="" frameborder="0"></iframe>
</div>
<script src="https://www.youtube.com/player_api"></script>
Why isn't it working?
Thanks for your help!
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.
This works fine in any Browser, but not on iOS6 (did not try it with iOS5)
I got an iFrame with a YouTube Video in it, situated in an overlay. After playing the video and toggle the overlay, the video again is broken. The video will playback in the background (you will hear the sound), but its not visible anymore.
Here's a minimal example:
http://jsfiddle.net/s9M6J/2/
<script>
/* jQuery */
$(document).ready(function() {
$('a').click(function() {
$('.videowrapper').toggleClass('hidden');
});
});
</script>
<style>
.hidden{
display: none;
}
</style>
<body>
toggleVideo
<div style="background: green; width: 500px; height: 500px;">
<div class="videowrapper">
<div id="video1">
<iframe width="500" height="315" src="http://www.youtube.com/embed/HMrlFLZFdnQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
Does anyone know a workaround for that?
Got a similar issue when embedding a Brightcove video on a jQuery Mobile page which is shown/hidden via javascript. Works on all desktop browsers and android but not Safari on iOS 6.
According to http://forum.brightcove.com/t5/General-Development/Video-in-show-hide-div-does-not-play-on-iOS/m-p/17558#M2352 a workaround is to hide your videowraper by moving it out of the screen using some CSS like position:absolute;top:-9999px then back to normal positioning when you want to show it.
For jQuery Mobile users it means embedding video iframes on multiple <div data-role="page"> on a single page structure won't work, need to put them on separate html pages.