How do I make a video on an overlay all disappear after it has finished playing?
Is this javascript?
Here is the code I have so far:
HTML / CSS Video end event issue
Take a look at this jQuery plugin
You can enable any action at the end of a video with something like this:
onPlayerEnded: function(){ // Do something here },
I found a post that could help you out HERE
I've never used them myself but there appears to be javascript events for video/audio, including ended.
video.addEventListener('ended', foo);
Where foo would be a function to hide the video.
Hope that helps!
Related
I'am a complete beginner in coding I was just practicing making a simple prank web page for my nephew (its an inside joke of ours) I know the solution might be easy but I cannot figure it out on account of being a beginner and still learning. I want the audio to play when I hover my mouse on the image and to stop playing when my mouse is out how can I modify my code (given below) to do that?. I tried with the onclick event and it worked. Thank you in advance
</head>
<body>
<script>
function play(){
var audio = document. getElementById("audio")
audio.play();
}
</script>
<img src="moolikeacow.jpg" value="PLAY" onclick="play()">
<audio id="audio" src="rickroll.mp3"></audio>
</body>
I refactored your code a bit. First of all moving the script element to the end of the document to make sure that all elements are loaded before referring to them. Second I made event listeners for both click, mouseover and mouseout events. I also added a function for stopping the audio.
<body>
<img id="img" src="moolikeacow.jpg" />
<audio id="audio" src="rickroll.mp3"></audio>
<script>
var audio = document.getElementById("audio");
var img = document.getElementById("img");
function play() {
audio.play();
}
function stop() {
audio.pause();
}
img.addEventListener('click', play);
img.addEventListener('mouseover', play);
img.addEventListener('mouseout', stop);
</script>
</body>
The First Problem why it doesn't work is that you wrote javaScript top of the html elements as a result javaScript can't grab those elements because those elements are created after javaScript.
Second Problem is You Added The Click event to image so only if you click it will start the audio, not on hover. You should add the mouseover event listener instead of click to make that work.
I just wrote a script that works well as you are looking for and with good comments so you can use or learn how it's working
https://gist.github.com/mmestiyak/93b4ee8952337f7847e3aab4f6521174
You Used Inline Event in Image But There is much more things to do with addEventListener method that comes in every element you grab in javaScript.
You can give a look at MDN to know more about addEventListener
Here you can see the live version: https://h7qym.csb.app/
hover on the image and just wait for some seconds to see the magic
If Any other things to know please let me know, i enjoy help you
try this:
$('a').hover(function(){
PlaySound('mySound');// calling playsound function
},function(){
StopSound('mySound');// calling stopsound function
});
and change your anchor tag like,
Hover Over Me To Play
I am trying to view a video stream from an IP camera in a web page, when the stream can be played I want it to start automatically. Trying to do that with a timer, try to play and if that fails, try again.
The timer (timeout) doesn't seem to do that, however if I execute the script using a button, it does. What am I missing?
see the code below.
thanks,
Ron
PS: I commented out the setTimeout functions, to make the button work.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function playVid() {
var videoElem = document.getElementById("IPcamerastream");
var playPromise = videoElem.play();
// In browsers that don’t yet support this functionality playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
videoElem.controls = true;
}).catch(function(error) {
// Automatic playback failed.
// setTimeout(playVid, 1000);
});
}
}
//setTimeout(playVid, 1000);
</script>
<button onclick="playVid()" type="button">Play Video</button><BR>
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540"></video>
</body>
</html>
Look into the features of the video html5 tag:(https://www.w3schools.com/tags/tag_video.asp)
one of the optional attributes is autoplay (Specifies that the video will start playing as soon as it is ready) so there is no need to set timeout.
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540" autoplay></video>
Move your script below the video element, and you should not need the timeout at all, because the element will already be initialized when the script is executed. So document.getElementById should resolve the element right away.
Using timers will introduce race conditions. If anything, you should add a listener to the DOMContentLoaded event.
Welcome Ron,
This is a well formatted question, but target browser info could also assist in helping you resolve your issue. Please consider adding it in future!
As for your problem, you tell us that you wish the video to autoplay, I'm assuming on page load?
I've also removed the duplicate source paste.
In this case, you only call playVid() from within the promise erroring out. The initial call is bound to the button click event.
In short, only clicking the button will initiate the playVid() function.
You need to add an event listener for DOM readiness and call playVid() within that. Otherwise, it's only being called when you click your button!
document.addEventListener('DOMContentLoaded', (event) => {
//the event occurred
playVid();
});
You can also use the autoplay HTML option in the video tag.
lang-html
<video {...} autoplay />
I had an almost similar problem ، when I received the video stream in a webrtc project, the video would not be displayed without clicking a button.
if you want to play automatically received stream video, you should add "muted" in the video tag.
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
I'm using video.js here:
http://dev-carlyle.sassafrascreative.com/
I want the text over the video to disappear when the video's play function is triggered. right now it works sometimes and then sometimes it doesn't. Currently I'm using jquery's hide function but there has to be a better - more reliable - way to do this. Any ideas?
this is a snippet of my current solution, if you can call it that...
<script type="text/javascript">
$(".vjs-big-play-button").click(function(){
$(".banner-email").hide(1000);
});
</script>
If you read the video.js docs it has this functionality built in
https://github.com/videojs/video.js/blob/master/docs/api.md#events
var myFunc = function(){
var myPlayer = this;
$(".banner-email").hide(1000);
};
myPlayer.on("play", myFunc);
This is better because once the video is paused you can make the email thing come back up. It's a custom event listener fired by video.js
play Fired whenever the media begins or resumes playback.
Try to use on() function for this like,
<script type="text/javascript">
$(document).on('click','.vjs-big-play-button',function(){
$(".banner-email").hide(1000);
});
</script>
i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!
You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/
Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.
jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example
thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!