Hi i have a video on my page (mobile view), by default its controls attr is turned off. I want to turn them on and show just on FULLSCREEN (I have a custom fullscreen button).
I was trying to add $('#videoAbout').attr('controls', ''); and also $('#videoAbout').attr('controls', 'true'); when Fullscreen is turned on, but it doesn't work on mobiles. On desktop resized to mobile resolution it works fine.
Can anybody help me out?
Here is live example on my webpage.
Related
On my website there is a video which should autoplay. It does that on most devices, apart from, of course, iPhones. I'm using the WordPress cover widget (and WordPress beta 5.5) for the video.
When it doesn't autoplay on the iPhone, it shows an unclickable play button:
Image
How can I make this play button disappear, so that at least a static image shows?
Thanks!
If you know how to code in js(javascript) or knows somebody who does, you could remove the play button icon or even autoplay the video for iPhone.
helpful resources
https://developer.mozilla.org/en-US/docs/Learn
https://www.w3schools.com/js/default.asp
There is this handy npm package that can help its called react-player https://www.npmjs.com/package/react-player
it works with vanillajs to check out a fiddle of the example on the homepage
https://jsfiddle.net/o62snj3p/
Can you show your code? Videos should autoplay on all browsers. For mobile, you need to add the muted attribute.
I have created some social icons using tag. To open the particular social icon ,i can either touch it or click it . It is working fine for desktop screen and in my ipad. Whereas it is not working when i tried to open the same link with touch in mobile device. Does anyone experienced this problem? if so, how to solve that?
Hello guys I have got custom fullscreen icon that triggers fullscreen on my video. Everything is ok except that it doesn't work on Apple's devices. Do you know how to fix that?
$('.fullscreen_btn').click(function() {
fullscreen=true;
var mediaElement = document.getElementById('videoAbout');
if(mediaElement.requestFullScreen) {
mediaElement.requestFullScreen();
}
else if(mediaElement.webkitRequestFullScreen) {
mediaElement.webkitRequestFullScreen();
}
else if(mediaElement.mozRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
else if(mediaElement.msRequestFullScreen) {
mediaElement.mozRequestFullScreen();
}
});
As I said - code above is working on Windows/android devices, but not on Apple's.
I sloved my question. All i had to do is that:
var mediaElement = document.getElementById('videoAbout');
mediaElement.webkitEnterFullscreen();
mediaElement.enterFullscreen();
This is opening fullscreen on HTML5 video on iOS devices.
Quoting directly from the website
In Safari, the built-in video controls include a play/pause button, volume control, and a time scrubber. In Safari 5.0 and later on the desktop and on iOS 4.2 on the iPad, the controls also include a full-screen playback toggle on the lower right. The controls automatically fade out when the video is playing and fade in when the user hovers over the video or touches it.
I also says If you embed audio or video in your website, you should use HTML5. you might be using old html4, I don't know. Try this link
Recently I faced a problem with Youtube videos (iframe API) in WebView of Android 4.X devices.
The problem is onShowCustomView() not fired when video starts playing on Android 4.X devices. I searched for reason, why onShowCustomView() not fired? I got answer as in Android 4.X devices WebView has a feature Embedded Video, because of this video ( in HTML5) will be played by WebView and won't display the video in other Layout.
But when user requested Full Screen mode, then onShowCustomView() will be fired.
Actually I need the Full screen mode of youtube video by default, In Youtube's iframe API no such option to enter full screen, user has to press full screen button.
So for my requirement only 2 answers are there.
Disbaling of Embedded Video for my WebView, then it will work like below Android 4.X and onShowCustomView() will be fired.
Setting the full screen mode by default with Javascript in html file supplying to WebView.
So If anybody got solution to my problem please help me otherwise suggest me to solve this.
I'm looking to add some videos to my mobile webapp. For the best UX, I'd like to avoid having a simple static video-tag. (because its in an element which is webkit animated and video + webkit animations don't always play nicely together in my experience.)
Rather, I'd like to have an image (with a play icon on it) to "link" to the video. Mobile YouTube (as seen on iOS) have done this very nicely where when you click the image, the video seems to "pop" up to fullscreen and plays. How do they do this? Is it a link? A previously hidden video-tag? Some webkit-animation to do the "popping"?
I snooped around using Chrome Inspector (+user agent switcher to iphone4) but the videos don't play on the desktop browser, and the code overall looks quite complex..
Can you help?
What you can do is on-click of the video thumbnail, you can load the video url using the object/embed tags. In IOS, whenever a video starts playing it automatically plays it in fullscreen(feature of IOS itself)
I believe you can do something similar to this on certain browsers (e.g. WebKit.)