I have a scenario where I have search results that contain video content. Each video item in the results has a thumbnail sized video player, so up to 10 html 5 video players can exist per result set. When the user clicks the thumbnail, the video goes fullscreen and automatically plays the video. When the user exits fullscreen, the video pauses.
This all works great on iOS devices, but on android I have significantly more even handling to worry about. Here's the logic as I have it now:
goFullScreen: function (ev) {
var el = ev.target,
isVideoFullscreen = el.webkitDisplayingFullscreen;
el.webkitEnterFullScreen();
// the approach below is the only way I could get reliable fullscreen detection on android
$(window).bind("resize", function (e) {
if (isVideoFullscreen != el.webkitDisplayingFullscreen) {
isVideoFullscreen = el.webkitDisplayingFullscreen;
if (isVideoFullscreen) {
el.load();
el.play();
} else {
el.pause();
}
}
});
}
Even though iOS does not need all of this even handling, it still works fine. The problem with android is that when I exit fullscreen, the video pauses, but the poster image is replaced for the video I just paused with a still from the video (to be expected), but all subsequent videos in the result set have their poster image replaced with an ugly video icon. As a result, the thumbnails just look like broken videos. But if you tap them they still go fullscreen and play just fine.
I'm testing on a Galaxy Nexus and a Galaxy SII. I can say that the el.pause() is not responsible, if removed the video will continue playing in the thumbnail and all video tags below it will still have the broken poster icon.
This works as expected on desktop webkit browser and on iOS devices. Only experiencing this issue on android 4+ devices. Also remember that the EnterFullscreen request has to happen in the scope it's in. Calling out of this scope will prevent it from working due to security restrictions on mobile devices. I've pretty much exhausted all ideas so I'm looking here to hopefully get a few more.
Any suggestions would be greatly appreciated.
I've given up on trying to solve all of the bugs and quirks in Android. Instead, I'm just linking directly to the mpeg4 videos from the thumbnails. So no more video tags, no more event handling.
The only side effect is that some versions of android display a dialog on how you want to play the video, which is not ideal but better than any alternative I could find. Fortunately the iOS experience is consistent no matter what approach I take.
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've spent way too many hours on this with very little success. We have a client with a site that has a YouTube video popup when the page loads. It autoplays on desktop and shows the Youtube play button on mobile since autoplay is not supported on mobile. I am using the iFrame JS API to instantiate the video player (code examples below). This setup is working perfectly on desktop, but on mobile devices (Android or iOS), between myself and my coworkers, clicking the Youtube play button only plays the video about 80% of the time. The rest of the time the video loading spinner just spins and nothing happens. If I close a reload the player using the site controls it will play, but not initially.
I know that this will not be an issue for the majority of users viewing the site but I know our client is going to go ape crazy if, out of 100 reloads on their iPhones, even 10 of them result in this behavior.
I am instantiating the player as follows:
1) I am including a "hard copy" of the Youtube iframe api JS on the site first.
2) I have an object controlling the display of the youtube "modal" window that contains the player target -- when the function is called it does the following:
// Write a div element to the container
_instance.videoContainer.innerHTML = '<div id="youtube-player"></div>';
// Grab a reference to it
_instance.el = document.getElementById('youtube-player');
// Call the YT player API
_instance.player = new YT.Player('youtube-player', {
playerVars: { // trying a bunch of different params with no success
playsinline : 1 ,
origin : window.location.origin ,
autoplay : 1 ,
wmode: "opaque" ,
iv_load_policy : 3
},
videoId: videoId , // This is passed to the function
events : {
onReady : function(){
console.log('resolved player');
// another function that just changes the container visibility
_instance.play();
},
onStateChange : function( event ){
if( event.data == YT.PlayerState.ENDED ){
_instance.close();
}
}
}
});
At this point, the video is either playing automatically in desktop 100% of the time, or it has shown the Youtube player with the video thumbnail and big red play button on mobile. This is where the trouble starts -- most of the time it plays fine, the rest of the time it just spins and spins and never plays. What's interesting is, on Android, if I blur the window and reopen it, I can click the play button again and it will play.
It shouldn't matter at this point, but I am destroying the div and the player reference when the modal is closed.
I've tried pretty much everything I can think of...
The Youtube video is somehow being throttled and only showing so many times through the iframe to the origin? I added the 'origin' property to the params thinking this might be the case, but it didn't seem to make much of a difference. I seem to have a higher success rate than my coworkers loading the video.
Is there some reason to asynchronously load the youtube iframe script as in the examples, rather than loading a copy from my site?
That's all I can think of at this point... is there something I'm missing? Thanks.
There is a related thread which stated that the autoplay function is not allowed for most mobile devices.
From this documentation:
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
A simple workaround is to have a custom looks of the "play" button:
Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.
Hope this helps!
I ran into the almost the same exact problem. For us it was specific to cellular connections.
If the embed is larger than ~360px wide, the player attempts to serve up quality at "large" or higher to which AT&T and Verizon are throttling.
The result we see: player enters buffering state and cannot achieve playback.
Tests over T-Mobile work OK without issue.
Players embedded at or below 360px wide play OK on all networks at quality of "medium" or lower.
i am searching a way to check if user has watched the entire video on iOS device. I have tried 2-3 html5 video frameworks. Now i make tests with Popcorn.js.
I want the user watches the entire video and not skip to the end. I have tried every possible way i could think but nothing works on iOS. I tried the seeked method but it's not be triggered if an iOS user seeks back-and-forth.
In desktop everything works great of-course...
I'm implementing a video player using VideoJS. Two key functions of this video player are:
a) If the user leaves the page, resume the video at that point when they come back or on refresh
b) Include HLS (h.264/mp4) support to provide better video quality depending on the connection.
The API for saving and retrieving a user's timestamp is already in place, and using the excellent HLS plugin, the video player works almost fine in all browsers as expected. The following code is used to initialize the player and jump to the saved time:
videojs.options.flash.swf = '../video-js/video-js.swf';
var player = videojs(videoId);
supportHLS = videojs.Hls.isSupported();
player.ready(function() {
[[event listeners for media controls]]
this.on('seeked', function() { console.log('seeked');});
this.on('seeking',function() { console.log('seeking');});
var PLAYER_LOADED = 'loadedmetadata';
if(!supportHLS) { PLAYER_LOADED = 'canplay';}
this.one(PLAYER_LOADED, function() {
this.one('canplay', function() {
this.play();
});
this.currentTime(savedPosition);
lastViewed = savedPosition;
});
});
(Reason for the roundabout logic: Chrome had issues with playing the video before the new data (after the seek) had loaded, which caused a number of problems with the data in the buffer. Also, Safari 7.1 would break if you tried this during the 'loadedmetadata' event)
However, there's still one problem, specific to Safari. The loading spinner doesn't always go away when you refresh the page. Examining the logs and listeners seems to indicate that the 'seeking' and 'seeked' events fire at about the same time, but in different orders; the problem always arises whenever 'seeked' fires first, and never occurs when 'seeking' is first. Furthermore, any seeking after the video is playing removes the spinner, so it has to be caused by the initial seek.
It's interesting that Safari supports HLS streaming natively, yet consistently causes the most problems with this player implementation. This is the last Safari bug to iron out, but though it's small it still has a negative impact on user experience.
What causes Safari to fire the 'seeked' and 'seeking' events out of order like this? What can I do to work around it, or is there a cleaner solution for what I'm trying to accomplish?
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.)