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.
Related
I am making a timer app in React. Whenever the timer counts back to 0 it should play a wav sound file. It works fine on IE, Chrome, Edge, Android, but not on iOS.
I have found an explanation why this is happening, but not how to work around it.
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not. (Source: Apple Developer)
<audio id="beep" src="http://www.pacdv.com/sounds/interface_sound_effects/sound106.wav"></audio>
startTimer = () => {
document.getElementById('beep').play();
}
The start timer function runs when the timer reaches 0, not on a click event. Expected result would be on iOS to play the audio when counts back to 0.
i try to play a DM video on a page on clicking a custom button. It works perfectly on desktop browsers but not on ios devices.
Here is how i proceed using js sdk and jquery.
function _on_apiready(){
$custom_button.one("click", _playVideo)
}
function _playVideo(e){
player.play();
$custom_button.click(function(){player.togglePlay();})
}
var player = DM.player(dom_el,
{
video:dm_id,
params:{html:1, autoplay:0, info:0, logo:0, related:0},
events:{
apiready: _on_apiready,
timeupdate: _on_progress,
playing: _on_playing,
pause: _on_pause
}
}
);
On ios devices, the video seems to load but doesn't play. I need to press the play button of the player to start the video and then may use my custom button to togglePlay.
Doing something wrong ?
Thx
this question has been answered here already: Dailymotion embedded player on iOS devices (HTML5)
Basically, mobile devices prevent videos from being played automatically, this is why it's not playing with your code. As you say, those devices require an user interaction to first play the video.
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 wondering, is there a callback for when the user, after viewing a video in Safari on the iPhone, hits the "Done" button?
There are ways to get a callback on the video element when a video finished playing, but not if a video is set to loop. Looping poses a problem when trying to detect whether a user has finished watching a video.
a bit late sorry :) but this is the solution:
player = document.getElementById('videoplayer');
//when a user press DONE or PAUSE the first time is triggered the paused event so you can control with:
player.addEventListener("pause", function() {
//desired "done or puase button" behavior defined here
}, false);
//this is triggered when exit the fullscreen, or for example whrn the user First press PAUSE and THen press DONE
player.addEventListener('webkitendfullscreen', function() {
//desired "done button" behavior defined here
}, false);
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()
});