Okay I'm confused. If I un-comment the alert below the video plays when I click the play button, but only while the alert is on the screen. If I comment out the alert the video doesn't play at all. I have spent the last hour researching and playing with this but can't figure it out. Suggestions for a fix?
$(document).ready(function(){
$('#play').click(function(){
if($('#player').get(0).paused){
$('#player').get(0).play();
//alert('playing');
}else{
$('#player').get(0).pause();
}
});
});
duh...added return false and it works.
Related
I have hit a wall and cannot figure out how to make this work. With Vimeo's Advanced API I am pulling in all videos from an account with thumbnails. When clicking on a thumbnail the video is shown above and clicking on a different thumbnail hides the currently shown video. The problem is that the video continues to play even when it is hidden. I have spent a few hours looking at the API and I cannot get it to pause when hidden.
var iframe = $('.video')[0];
$('.thumbnail a').click(function(e) {
$f(iframe).api('pause');
});
The above code pauses only the first video. If I change the number [0] to [1], then the second video pauses when you click on another thumbnail. Does anyone have any thoughts? I am using froogaloop in the above code.
You can use this code to pause all YouTube and Vimeo videos on the page:
$('iframe').each(function() {
this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
this.contentWindow.postMessage('{"method":"pause","value":""}', '*');
});
I used this with jQuery:
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript">// <![CDATA[
function pauseAll() {
$('iframe[src*="vimeo.com"]').each(function () {
$f(this).api('pause');
});
}
// ]]></script>
use it on an onclick.
pause all
When I click the play button, it just goes to the end of the timeline. But if you drag the ticker somewhere in the middle (or anywhere really) it plays the video. So why won't it play initially?
It works in every other browser other than firefox. Im using Firefox 17
I appreciate the help. Thanks.
heres the link
http://www.lonestarveincenter.com/
Sorry for the necromancy but I found the answer to this problem.
The reason why your onClick() event isn't working is because Firefox has it's own onCLick event added to each video element hence whenever you click the video the video starts playing then instantly stops.
function playPause() {
'Before this event is fired the FF onClick event is fired'
player = document.getElementById("PlayerID")
var playBtn = document.getElementById('<%= img.ClientID %>');
if (!player.paused) { 'Player is playing and will go through this code block'
playBtn.setAttribute('Style', 'display: block;');
player.pause();
}
else { 'Player is playing and will skip this code block'
playBtn.setAttribute('Style', 'display: none;');
player.play();
}
}
One very quick test of changing the <source>'s of your video to those on the HTML5 Video site by W3 School's http://www.w3schools.com/html/html5_video.asp shows the desired behaviour: click play and the video starts from the beginning.
I suggest you try re-encoding your video, and testing locally.
How are you encoding at the moment?
I was having the exact same issue. I was using WebM video, and it would play fine - after you picked a spot on the timeline. I converted to .ogv, put it as the first option in the HTML above WebM and mp4, and it is working great in Firefox, and all the other major browsers.
I have a audio tag in my page, I bind an event handle to the ended event:
$('#audio').bind('ended', function() {
console.log('ended');//I can see this
$('#audio')[0].play();// but it could not play again
});
at first I play it:
$('#audio')[0].play()
the problem is, it can be played, and in the play end,I also coulds see the console info, but it can not be play again,how can I solve this problem?
Okay so I have followed a good tutorial regarding embedding videos via HTML5 video tag, which can be found here. Basically the idea is that on hover the video plays, on hover out it stops playing.
Well, I've been trying to include multiple videos on one page (all the same video, mind you) in hopes that I could create a sort of interactive multi-tiled board of sorts. In other words, you hover over each video, it creates varying images based on where in each video you end up, etc.
Whatever, the question I am asking is: based on this tutorial that I've followed, what is the best way to create multiple, tiled videos? I'll paste the code I've been working with. The problem I'm having is that if I create multiple javascript functions, it shows only the video of the last function I've created, rather than all videos.
I hope this makes sense. Here is the link to what I've been working on so far. NOTE: the video takes a while to load, so until then it will play the sound but no image.
Thanks in advance for any help!
Here is the solution I found:
The only warning I give you is to set the videos to preload="none" because if they all load it will be nightmare on your bandwidth. I had to switch mine and now I am looking for a solution to let people know a video is loading.
var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e)
{
this.play();
}
function hideVideo(e)
{
this.pause();
}
Here is where I got the answer: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/
For anyone that's looking to achieve this using jQuery, here's a solution that I use for dynamically loaded content:
//play video on hover
$(document).on('mouseover', 'video', function() {
$(this).get(0).play();
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
$(this).get(0).pause();
});
This can be used for a page with 1 - N videos, and only the hovered video will play at each time, while each will pause on the current frame on mouseleave.
Here's an example of it in action: http://jsfiddle.net/cc7w0pda/
Try this, it's easy to understand
<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>
When using HTML5 video, is it possible to have a constantly running script while the video is playing (but only when its playing)?
For example:
video.onplaying = function(e){
alert("playing");
}
video.bind("ended", function(){
alert('Video Ended');
});
These are examples I found and tried to incorporate into my player with little success.
When video starts call setInterval() to start your background task and give it the repeat frequency.
Do tasks in this function.
When video stops call clearInterval().
https://developer.mozilla.org/en/window.setInterval