In a UIWebView controller, sometimes, I'd like to link to a video. Problem is, I can't prevent the embedded video player from auto starting. Similar questions I found all seem to have issues playing YouTube videos, but that is not the case. I also tried to disable auto play by setting mediaPlaybackRequiresUserAction to NO, but that won't work.
Here's a sample of the my HTML:
<html>
<head></head>
<body>
<iframe src="http://eredivisielive.nl/player/TWE/play/131667/620" border="0" height="350" width="620"></iframe>
</body>
</html>
Are there any sort of notifications I can observe to prevent videos from auto starting?
Related
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 a video that I have positioned as a background to my website, however on mobile devices, specifically iOS-based devices, it is showing a video button in the middle of where the video should be playing. I'm not bothered about the video playing on mobiles, as I have a poster image fallback. I just wish to remove the button. I have tried the following, after searches here on SO, without any luck:
video {
&::-webkit-media-controls {
display:none !important;
}
&::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
}
Anything else I can try? I am testing on iPhone 6, though have access to other devices on Browserstack.
Just use
<video webkit-playsinline ></video>
Appears the code in my question DID work after all, I had an unrelated issue with caching that was preventing some changes from showing(!)
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
worked on iOS 15.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
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.
With iOS6 the old embed code no longer works, it just opens the video in Safari
I tried to use the new embed code, but when I make this dynamic it opens the video in Safari.
When I add a static entry in the webview it works, but it's rather slow and a lot of dom elements are injected
An example for the new embed code;
<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe>
I was thinking to use the HTML5 video tag and find out the url for the video, but this probably violates the Youtube TOS
Any suggestions?
The solution is to set OpenAllWhitelistURLsInWebView to YES in Phonegap settings