I've got probably very simple question but I cannot figure it out myself:
var video = $("myVideo"); video.pause();
I am trying to prevent the video from playing on page load (so I can later play it on mouse enter).
It says it's not a function.
Anyone can help?
video.pause() is not a jQuery function, you need to get the DOM object, easy way to do that is video[0], so try video[0].pause().
Related
I was making an game from a course project using html, css and javascript, and in this game i need to kill a fly everytime i click on it, so i decided to use an audio for everytime the fly dies to make the game more fun, the rest of the function is ok but my audio is not playing, altough i'm getting the audio source right.
`
fly.addEventListener("click", function(){
this.remove()
points += 10
document.getElementById('hasPoints').innerHTML = points
console.log(sound)
sound.addEventListener("canplaythrough", function(){
sound.play()
})
})
`
i've also already tried to add the sound preload property to auto but it still didn't work
The only solution i could achieve was changing how the sound would function, instead from playing everytime i kill a fly, i made it play for every click on the window, using window.addEventListener
I'm looking for a way to create something like a loading animation on a html5 video similar to the Youtube Video display (reference: https://www.youtube.com/watch?v=5vcCBHVyG50)
I tried it with the canplay-Event but I think I misunderstood the real meaning of this event.
My thought of this event was that enough data has been loaded and buffered so that the video can be played again.
But in my case this event just fires once. At the beginning of the video.
Is there any special Event which will be fired when the video is playable or needs to load more data?
Use fontAwesome framework. It has got your animation.
Go to an url such as:
https://www.youtube.com/embed/zvCBSSwgtg4
and open the chrome console. I want to know what javascript command will play the youtube video and what javascript command will pause the youtube video.
I've tried using the profiler and inspector to find these commands but they are too well hidden. If someone is really good at javascript debugging, this would be a big help. Thanks!
Yes, I know youtube has API for iframes, but my use case is different.
For HTML5 youtube player simply doing:
document.getElementsByTagName('video')[0].play()
document.getElementsByTagName('video')[0].pause()
I recently created a chrome extension for same: https://chrome.google.com/webstore/detail/youtube-playback-control/okbcoijdeebocmahlanbfemnckjonfnh
Hope it helps.
Have you tried triggering a click on the actual play/pause button?
document.getElementsByClassName('ytp-play-button')[0].click();
This should be easy to do, just check for event attached to the button that you pushed and then trigger them manually using.
For example if the button has a jQuery event handler use:
http://api.jquery.com/trigger/
Or if it is a native JavaScript event you can use:
How to trigger event in JavaScript?
I have created code for playing an .mp3 file using JavaScript. But the file is taking to much time to play on Android. I want to play the sound quickly after click on a text image. How do I increase loading speed on Android?
My JavaScript code:
if(window.audio)
{
audio.pause();
}
window.audio = new Audio (audio_path);
window.audio.play();
Check demo here -
http://97.74.195.122/gizmo-demo/canvasslidertwo.php
In the above link, click on the Japanese word for playing sound.
You are actually facing the bug depicted in this question. Which makes chrome browsers redownload the files from an Audio Element each time you change its src property (no-caching).
One solution would be to use the WebAudioAPIand store your audio files in the buffer. Doing so, you should be able to call them with no latency.
You can check the accepted answer for an example on how to deal with it.
Or you could also try not to call a new Audio() on each click, and rather load every audios from your page and only call their play() method on click.
But I'm not sure it would fix your issue.
I'm working on a site for a client and they're insistent on using HTML5's video tag as the delivery method for some of their video content. I currently have it up and running with a little help from http://videojs.com/ to handle the Internet Explorer Flash fallback.
One thing they've asked me to do is, after the videos finish playing (they're all a different length), fade them out and then fade a picture in place of the video --- think of it like a poster frame after the video.
Is this even possible? Can you get the timecode of a currently playing movie via Javascript or some other method? I know Flowplayer (http://flowplayer.org/demos/scripting/grow.html) has an onFinish function, is that the route I should take in lieu of the HTML5 video method? Does the fact that IE users will be getting a Flash player require two separate solutions?
Any input would be greatly appreciated. I'm currently using jQuery on the site, so I'd like to keep the solution in that realm if at all possible. Thanks!
You can view a complete list of events in the spec here.
For example:
$("video").bind("ended", function() {
alert("I'm done!");
});
You can bind to the event on the element like anything else in jQuery...as for your comment question, whatever element you're delivering for IE, yes, it would need a separate handler rigged up to whatever event it provides.
For the other question about timecode, the timeupdate event occurs when it's playing, and the durationchange event occurs when the overall duration changes. You can bind to and use them just like I showed with the ended event above. With timeupdate you'll probably want the currentTime property, with durationchange you'll want the duration property, each of which you get directly off the DOM object, like this:
$("video").bind("durationchange", function() {
alert("Current duration is: " + this.duration);
});
There is an OnEnded event associated with the video tag. However, it does not work for me in the current version of Google Chrome.
HTML 5 Video OnEnded Event not Firing
and see also
Detect when an HTML5 video finishes
For a general-purpose solution (supports video tag with fallback see)
http://camendesign.com/code/video_for_everybody
or
http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library or http://www.mediafront.org/
I used this code. It basically reloads the video which will get the poster to show again. Assuming you want the image at the end to be the same as the poster. I only have one video on the page so using the video tag works. I have my video set to autoplay on page load so I added the pause after the reload.
<script type="text/javascript">
var video= $('video')[0];
var videoJ= $('video');
videoJ.on('ended',function(){
video.load();
video.pause();
});
</script>