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().
Related
When I am using my app, I have a ListView.builder, and if someone presses an item on that it does a Navigator.push function and leads them to the corresponding video. However, if I pause the video in the middle, when Navigator.pop is called, it pops the window, but if I play another video after that, it resumes the old video and then starts the new video. Can anyone help me on how to stop the issue?
I've been using the React Native Video module and its working great, however I need the video on playback end to automatically rewind back to the beginning. The video instance has the option to use:
onEnd={this.onEnd}
To call a function when video playback finishes, and also seems to have this function:
seek(seconds)
But I'm not sure how its used exactly. I need to set the video to 0 time index at playback end.
If you want to start playback again immediately, you can you use the 'repeat' property. If you really just want to reset it without playing, then you need to use seek(). But as far as I know the video component doesn't expose the seek function of the underlying video player directly, but via it's refs. You can use
myVideo.refs.node.seek(0)
where myVideo is a reference to your video component.
The rel parameter in YouTube API dictates whether or not related videos are shown at the end. When rel=0 the video reverts back to the thumbnail with a play button.
However on mobile (tested on iPhone / iPad / Fire Tablet) when the video goes back to the thumbnail it cannot be played a second time. It just does nothing.
I reported the issue to Google but nothing yet after a few days.
I had to resort to destroying the video and recreating it but this makes for a kind of nasty flickering.
My experience with YouTube issues is they never seem to end up fixing anything related to iOS - so I was wondering if there was any other kind of trick to prevent this.
Test page
The trouble with refreshing a webpage at a specific interval is that you dont know exactly when the video ends so you need to develop a method which the video player sends a signal when the video ends, which would then start the script to refresh the page. Otherwise you end up restarting it in the middle of the video. so personally, I would not even mess with refreshing the page. For Audio players it works ok because audio is smaller and streams more quicker. Video dont.... they always stop to buffer.
So YouTube API uses "Events" and "Listeners", so in particular, you need to design around the Event: "onStateChange".
When onStateChange = "ended" (zero) the video has ended, so then you reload the video player with the same video and set it to its Ready State again.
In theory its very easy you basically need to setup and control the entire video player through javascript. And the API gives examples on that.
http://code.google.com/apis/youtube/js_api_reference.html
http://grizzlyweb.com/webmaster/javascripts/refresh.asp
http://code.google.com/apis/youtube/forum/
Have a look at loop and playlist parameters as well. You can set playlist parameter to video ID and same video can be replayed using this.
So, it will be something like:
http://www.youtube.com/embed/{VIDEO_ID}?wmode=opaque&loop=1&version=3&playlist={VIDEO_ID}
Hope this helps!
Appears to have been fixed by YouTube.
I can now play the video multiple times (on multiple devices) without it getting stuck. Was too busy wondering why my question was getting so little attention that I forgot to check again to see if it was fixed ;-)
Is it possible, using javascript, to detect if an embedded youtube video pauses playback in order to let the video buffer? I know that there are events that fire when the user presses pause, but I'm looking for an event that fires when the video pauses due to a slow connection. I'm creating a web application where it's important to have the video play through smoothly. If the video pauses due to a slow connection, I want to detect that.
Use this code player.getPlayerState():Number it seems like you are allowed to ask the player what status it is in so this may help you
https://developers.google.com/youtube/js_api_reference
There is also a state 'buffering' being fired when the player needs to buffer more data..in that case the video stops. I guess also 'error' state might be of help.
The solution I worked out is just to use the javascript API's onStateChange callback (https://developers.google.com/youtube/js_api_reference) to detect when the player is started for the first time and when it finishes playing at the end. When the player is started, I grab the current time. When it finishes, it sees how much time has elapsed. In my application, the user cannot pause the video, so comparing the elapsed time to the video length indicates if it paused for loading.
I'm trying to play an HTML5 video in reverse on an iPad (The video needs to switch between forward and reverse arbitrarily based on user input).
The HTML5 <video> element includes a property called playbackRate which allows video to be played at a faster or slower rate, or in reverse. According to Apple's documentation, this property is not supported on iOS.
Playing in reverse can be faked without the use of playbackRate by setting the currentTime property multiple times per second (e.g. 10-30 updates per second). This approach works on desktop Safari but it seems that seeking is capped on iOS devices to around 1 update per second - too slow in my case.
Is there any way to play an HTML5 video backward on an iOS device (namely an iPad)?
(I'm testing on an iPad 2 running 4.3.1)
As Mihai suggested, use the two versions and update the seek location when the user changes the playback direction.
Layer the videos in DIVs on top of one another, and when the playback direction is flipped, toggle the div visibility (and pause playback of the the one being hidden).
So this is the timeline:
User clicks playback toggle.
Pause displayed video.
Get Seek location of displayed video.
Subtract that value from the video duration.
Seek to this value in the non-displayed video.
Toggle displayed video DIVs.
Begin playback of newly displayed video.
The playbackRate attribute is now supported on iOS 6 Safari.
Why not stitch the reverse and forward versions together into one movie?
That removes the problem of unloading and loading video when the user flips the direction. With a single movie approach, when the user flips direction, all you need to do is figure out the corresponding point in the other half of the movie and seek to there.
My suggestion is to make a "fake" video player in your HTML code. Then capture the user's attempt to "play" the video using the safari/ios callback methods. Then create a MPMoviePlayerController that actually loads the video and display it over the original position of the video in the browser or only support full screen play. MPMediaPlayback protocol supports reverse playback via the currentPlaybackRate property so hopefully, this should be a temporary fix as I can't see the iOS version of Safari not eventually implementing this feature since it is supported by the native player.
NOTE: I was stupid and missed a non-trivial part of the question, so the following is pretty useless for iOS purposes
After a moment of Googling, I found the following code along with explanation on how to support reverse-playback of html5 video on Webkit based browsers:
function speedup(video, direction) {
if (direction == undefined) direction = 1; // or -1 for reverse
if (video.playbackRate != undefined) {
video.playbackRate = direction == 1 ? 2 : -2;
} else { // do it manually
video.setAttribute('data-playbackRate', setInterval ((function playbackRate () {
video.currentTime += direction;
return playbackRate; // allows us to run the function once and setInterval
})(), 500));
}
}
function playnormal(video) {
if (video.playbackRate != undefined) {
video.playbackRate = 1;
} else { // do it manually clearInterval(video.getAttribute('data-playbackRate’)); }
}
Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/
You need to pass in the html5 video object to the speedup function, but then again that function could possibly be reduced into the following (I haven't tested this yet, it is an iPad specific function):
function reverseVideo(video) {
video.playbackRate = -1;
}
Feel free to play around, and search for more information on the html5 video element :)