<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
Related
In Chrome, right-clicking a video element brings up a context menu with a "Picture In Picture" option. In Electron, right-clicking does nothing. How can we implement Picture In Picture in Electron?
Did you try
document.getElementsByTagName('VIDEO')[0].requestPictureInPicture()
For a full description the currently available API, see https://developer.chrome.com/blog/watch-video-using-picture-in-picture/
One option is to enable the controls-prop of the underlying <video> element:
<video id="video" controls>
<source src="flower.mp4" type="video/mp4">
</video>
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.
I'm writing an app which uses html5 video elements.
On iOS Safari when using playsinline to ensure the video is treated as an inline element for positioning etc, it works as expected except that the video appears on top of everything. z-index and positioning techniques don't seem to help with this issue. I cannot get anything to appear on top of the video under any circumstances.
On every browser except iOS Safari this seems to work absolutely fine.
For reference, this is an Angular app, and I'm currently testing in Mobile Safari on iOS 11.1.2
Also worth mentioning, the video src will resolve to a local blob url. eg. blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6
<video
id="video"
[src]="src"
autoplay="autoplay"
muted="muted"
webkit-playsinline
playsinline>
</video>
I had the same problem. Removing overflow style from parent div of video tag solved it. See Video and z-index inside scaled element: some divs disappear for more information.
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'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.