I have a WKWebView() that plays embedded YouTube videos. I'm passing in an array of video IDs to the YouTube JS API and displaying videos in the web view. In the foreground, videos play automatically, one after the other.
When my app enters the background, the video resumes playing (thanks to evaluateJavaScriptWithString()). However, based on whether I enter the background by clicking the home button or the sleep/wake (lock) button, the WKWebView() will do one of two things when the next video loads:
If I press the sleep/wake (lock) button, the videos will continue playing consecutively even in the background, as it should. Granted, I always get this notification:
2015-12-16 01:34:26.793 App[10335:1967149] ** -[UIApplication _handleNonLaunchSpecificActions:forScene:withTransitionContext:completion:] ** unhandled action -> <FBSSceneSnapshotAction: 0x13c36f240> {
handler = remote;
info = <BSSettings: 0x13c36b0f0> {
(1) = 5;
};
}
...but the videos keep on playing. Now, when I press the home button, the following video will not play. It will stop at the end of the currently played video and not play the next video, even if I call a custom play() function on the web view.
I have Javascript code for the YouTube iFrame that lets me control the player. When the player state changes (when a video ends), the following code is called. I'm wondering if window.webkit.messageHandlers.callbackHandler.postMessage() has anything to do with it.
var index = 0
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.UNSTARTED) {
var message = "next video index:"+index
try {
console.log('Video has ended');
window.webkit.messageHandlers.callbackHandler.postMessage(message);
} catch(err) {
console.log('The native context does not exist yet');
}
}
}
My question is: iOS is clearly able to load the next videos in the background as shown by the sleep/wake (lock) button. It does so without fail. Why isn't this the case after entering the background via the home button? It's the same background mode.
My website is running Bootstrap 3.0 and I have an intro video and full length video hosted on YouTube that I am trying to implement. The intro video autoplays when the page is loaded, and then I have a button that opens up a modal window with the full video with audio.
I would like to stop the video completely on close of the modal window so that if they click the button to open it again, the video starts from the beginning. Unfortunately, the stopVideo function doesn't seem to be working how I would expect. Basically, it's just pausing the video, so if I open the modal back up, the video starts playing right from where it left off.
How can I make it so that the video stops and starts from the beginning if it's reopened?
Here is my current code:
$('#myModal').on('show.bs.modal', function () {
$('#placeholder')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
$('#full')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});
$('#myModal').on('hidden.bs.modal', function () {
$('#full')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
$('#placeholder')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*');
});
Thanks!
You can use seekTo to get back to the begining of the video when the modal is open.
An play the video after the seekTo
Doc from API
player.seekTo(seconds:Number, allowSeekAhead:Boolean):Void
Seeks to a specified time in the video. If the player is paused when
the function is called, it will remain paused. If the function is
called from another state (playing, video cued, etc.), the player will
play the video. The seconds parameter identifies the time to which the
player should advance.
The player will advance to the closest keyframe before that time
unless the player has already downloaded the portion of the video to
which the user is seeking. In that case, the player will advance to
the closest keyframe before or after the specified time as dictated by
the seek() method of the Flash player's NetStream object. (See Adobe's
documentation for more information.)
The allowSeekAhead parameter determines whether the player will make a
new request to the server if the seconds parameter specifies a time
outside of the currently buffered video data.
We recommend that you set this parameter to false while the user drags
the mouse along a video progress bar and then set it to true when the
user releases the mouse. This approach lets a user scroll to different
points of a video without requesting new video streams by scrolling
past unbuffered points in the video. When the user releases the mouse
button, the player advances to the desired point in the video and
requests a new video stream if necessary.
I also encountered this problem,spend hours digging into it. however I didn't find a sure reason, but the following reason may be it:
("stopVideo()") Stops and cancels loading of the current video.
and
Important: Unlike the pauseVideo function, which leaves the player in the paused (2) state, the stopVideo function could put the player into any not-playing state, including ended (0), paused (2), video cued (5) or unstarted (-1).
This is quoted from the YouTube API page
But I'm confused by this, because even if the background mechanism are not the same between stop and pause api, they act still identical(sometimes), so I'm still confused and curious about the real usage of stopVideo().
I'm using a video tag in my html in an iphone, and there is a bug that happens with the following sequence of steps:
The user clicks the "play" button
The quicktime player shows with the "loading" text
The user clicks the "done" button while the player still says "loading"
The html shows up again
The user clicks the "play" button again
Nothing happens (the quicktime player does not show)
I'm using a standard html5 video tag:
<video type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" poster="[postersrc]" src="[videosrc]" controls ></video>
Does anyone have any idea of what's going on?
If the user waits untill the video is loaded and starts playing, this error does not happen (the user can play the video again).
I have a website with a list of videos to be played with an IOS device. When the user clicks on a direct link to the video to watch, the video opens in the video player. When the video is done playing or the user hits the ok button, it takes the user back to the video list.
I need to be able to fire an event in js when the video is done playing. It doesn't appear that mobile safari actually refreshes the page, just re-displays it. Is there any events that I can hook into to detect the end of the video?
Thanks!
It should work out to be like this (untested):
video = document.getElementById('yourid');
video.addEventListener("ended", function(e) {
video.webkitExitFullScreen()
});
I tried getting a video to display fullscreen on iPad using HTML5, but the result I get is:
First time click video is play
Second time click fullscreen video is play it will appear.
I can't get both the video to play and turn fullscreen when activated.
Here's the source I've been using:
$(document).ready(function() {
$("#te").bind('click', function() {
$('#myVideoTag')[0].play();
$('#myVideoTag')[0].webkitEnterFullScreen();
});
});
I was running into the same issue, and setTimeout seems to be the best solution I've run into.
This is what is working for me:
note: the videoEnable function is called through an onclick attribute in the "a" tag
//define function
var videoEnable = function(videoCount) {
//Play video
$('video').get(videoCount).play();
//Timeout before fullscreen registers
setTimeout(function(){
$('video').get(videoCount).webkitEnterFullscreen();
}, 2000);
}
Is that what you are looking for?