Hide div on video play - javascript

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>

Related

How do I get audio to play when I hover over an image?

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

javascript not executed with setTimeout but does with button click event

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.

jquery trigger a click event for video

I am using a jquery code to automatically run the video on desktops, with all versions of safari on mac it works except the the latest one which is high sierra, i am trying every possible combination to run it, no matter how apple sees it,
I had the code which mostly works
function startVideoIfNotStarted () {
window.setTimeout(function(){
var play = document.getElementById("player");
play.addEventListener("load",function(){
player.play();
})
}, 800);
}
startVideoIfNotStarted();
Now i am trying to use the click event to trigger itself but i am little bit confused on the code how should i do
setTimeout(function() {
var play = document.getElementById("player");
play.addEventListener("click",function(){
player.play();
})
}, 1000);
Not exactly sure what you're looking to do, but if you're trying to simulate a click on the video to play it, you could try something like:
$(document).ready(function(){
$('#player').trigger('click');
//handle the click event
$('#player').on('click',function(){
play(); //or whatever you're trying to accomplish here
});
});
If it's anything like a youtube video, just triggering the click on it should play it I believe?

Simple pause with vimeo api Froogaloop

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!

How to make video disappear after end in html?

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!

Categories

Resources