As most web developers are aware, there’s an annoying lack of support for the full screen api in Safari on iOS. However most popular video sites such as YouTube and Vimeo have a way of faking it by allowing the user to toggle between playing the video inline (with the playsinline attribute I assume) and playing the video in the native iOS player (like when videos don’t use playsinline). I made a simple script that I thought would do this, but it doesn’t work reliably and I’m sure there’s a better way to implement it. It goes like this:
var video = document.getElementById('video');
function toggleFullScreen() {
video.pause();
video.hasAttribute('playsinline') ? video.removeAttribute('playsinline') : video.setAttribute('playsinline', '');
video.play();
}
My question is: does anyone know how these sites do it? And is there a better way than toggling playsinline?
Related
I'm trying to get video stream from phone camera and display the stream on a video element. This is the gist of the code I have:
...
navigator.mediaDevices.getUserMedia(constraints)
.then((stream)=>{
video.srcObject=stream;
video.volume=0;
video.mute=0;
video.play(); //error here on iOS Safari
...
While this works on all desktop and android browsers, this does not seem to work on iOS, giving me the error on line video.play().
From what I understand so far, this seems to be a safety measure by Safari on mobile to prevent websites from consuming too much of user's data. Meaning, unless specifically initiated by the user, the browser won't allow video.play()
I have tried adding "muted" attribute on the video element itself (besides just autoplay), but that did not seem to fix the issue.
So, I'd like to know if there are any other remedies to the issue here or if I should look for alternative ways to show the video feed. Any help/suggestions are greatly appreciated.
Have you tried adding playsinline to the video element?
https://webkit.org/blog/6784/new-video-policies-for-ios/
I am currently working on a google chrome extension that features a content script for altering youtube pages. I have done some work with altering the DOM already and all of that works, however, I have been looking for solutions to have the youtube video pause when the page loads.
I initially thought perhaps I could simulate a keystroke as the spacebar pauses youtube videos. I also tried using javascript to pause the video but I don't think it works with Youtube's custom video player.
Don't feel obligated to write any code for this but if someone could point me in the right direction I would be very grateful.
On the main page of a video, the HTML5 video element playing the video has a specific class, so you can target that; and as an HTML5 video element, it has the play() and pause() methods already.
document.querySelectorAll('.html5-main-video').forEach(vid => vid.pause());
That will pause all HTML5 main videos on the page. Helpfully enough, that's the same class used by the little autoplaying video on some channel pages, so it should work for those as well :)
(Don't worry about Flash videos; YouTube hasn't supported those for years now.)
I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1
Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).
var ytplayer = document.getElementById("movie_player");
ytplayer.addEventListener('onStateChange', 'onPlayerChange');
function onPlayerChange(newState) {
alert('do something at least...');
if(newState == 0) {
alert('movie has stopped');
}
}
This is how I try to listen to YouTube events with a Google Chrome extension. It doesn't give me any error at all, even though it should when the movie has finished. Or at least when the state has changed. Does anyone know what is wrong?
Console doesn't give me any errors.
Your code works fine on Firefox because the player is Flash. However Chrome supports HTML5 and the player is HTML5 Video Player. So there is no element which has "movie_player" id. Are you sure your video player is Flash on Chrome. Right click the video and see player info in context menu. More details about YouTube HTML5 Player.
Youtube HTML5 player is currently in trial, so you should detect user's player mode and add a fallback for it at least YT completely use HTML5.
The HTML5 video element fires its own events. Right now, it looks like the easiest way to get at it is by class name (since it doesn’t have an id):
var videoElement = document.getElementsByClassName('video-stream')[0];
Video elements fire a bunch of events, which you can find listed here in the HTML5 spec.
For example:
videoElement.addEventListener('pause', function(){ alert('paused!'); })