I wonder if it is possible to make an action with youtube api when embeded video finishes. For example, in my web i start video on hover of one element, but i want video tu be replaced by static image when it finishes. How can i do that?
I had wordpress and used in suchh steps:
installed http://www.tikku.com/jquery-youtube-tubeplayer-plugin
then add this code into page
but change
1) yoursite.com to yours
2) alert("Hello"); to your another desired function;
3) DkoeNLuMbcI to desired video id;
<div id="youtube-player-container" style="float:right"> </div>
<script type="text/javascript" src="http://yoursite.com/folder/jQuery.tubeplayer.min.js"></script>
<script type="text/javascript">
jQuery("#youtube-player-container").tubeplayer({
width: 422, // the width of the player
height: 285, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: "DkoeNLuMbcI?autoplay=1", // the video that is loaded into the player
preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onPlayerEnded: function(){ alert("Hello"); },
onUnMute: function(){} // after the player is unmuted
});
</script>
use http://www.tikku.com/jquery-youtube-tubeplayer-plugin
It makes everything easy. Once you have it set up, which shouldn't take long (there is an easy how-to), simply add this line to you player initiation:
onPlayerEnded: function(){ // Do something here },
This will do whatever you want after the player ends. There are also callbacks for when the player is paused, stopped, played, muted, unmuted, queued, and more
Let me know if this works, or if you have trouble using the jquery plugin. It really is very helpful and easy!
Related
I am using reveal.js for a demo application in which I mix simple slides with slides with audio and slides with audio and video. In order to have this demo advance by its own, I use the setting as follows
<script>
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: false,
autoSlide: 3000,
dependencies: []
});
the important parameter is autoSlide set to 3 sec. This generates a play/pause button to show up. Depending on my slides, I can also do control the timing with per-slide parameters set here to 14 seconds.
<section data-autoslide="14000" data-background="#4d7e65" >
<h1>onto the admin view</h1>
<video data-autoplay src="video/test2.mp4" width="100%" height="100%"></video>
</section>
my question: how can I make my video and/or audio files pause and play per this control. Currently when I hit the stop button, the slides will not advance anymore,but the video and audio continue to play. I have not seen anything in the documentation.
Maybe I miss something
many thanks
Peter
You may want to have a look at the audio-slideshow plugin that might do what you are looking for. With the plugin you can use the normal audio player controls for audio (and video). When the audio file is played completely the slideshow automatically advances with the next slide.
You can find a demo here and the plugin here
Asvin
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 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?
I am currently developing an iPad app that aggregates various video feeds on the internet. Then using a UIWebView, some Javascript, a <video> tag, and the mp4 URL I can playback the video and the native iOS video controls appear. This all works great.
Additionally by subscribing to the video 'end' event, I can queue up another video to play after the one you were watching finishes. This also works great, EXCEPT if you were in fullscreen when the next video starts to play, you are taken out of it and back to the app!
Does anyone know a way that I can persist fullscreen HTML5 video in iOS when a new video is loaded?
The following worked for me on mobile safari on an iPod touch. Listen for the end event and change the source of the current video tag to the new video.
<html>
<body>
<video id="myVideo" src="http://shapeshed.com/examples/HTML5-video-element/video/320x240.m4v" autoplay>
</video>
<script>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('myVideo').src='http://movies.apple.com/media/us/html5/showcase/2010/demos/apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov';
}
</script>
</body>
</html>
I am developing a site targetted to webkit(android and iphone) . Since webkit supports Html 5 video tag so i decided to use this tag to play videos.
Due to design issues, I can't show the video place holder on the page. Design demands a play button on the page which is when clicked will start playing video in full screen mode.
So I decided to set the width and height of video element to zero to hide the control and use javascript to play the video. Here is my code
Play Video
<video id="myVideo" src=""></video>
<script type="text/javascript">
function playVideo()
{
var video = document.getElementById("myVideo");
try {
if (video)
video.play();
else
alert("video control not found");
} catch (error) { alert(error); }
}
</script>
.So far so good and it works perfect in android and iphone/ipod prior to IOS 4+
In Iphone 4. Clicking on the link does execute the playVideo function but does not play the video and provide no error.
Can anybody tells me w