Im green with JS, bit i would like to implement to my website html 5 video.
video code looks like this
<video id="myvideo" style=width:600px; height:550px controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I would like to make video pasue on 15 second and trigger an event
Now my event is on button
button code
<button onclick="myFunction()">Watch</button>
<script>
function myFunction() {
RC_STARTGATE();
}
</script>
Edit: Button is temporary solution. I would like to remove button and something like this:
Video starts=> after 15 seconds it pauses=> and triggers same event as button did RC_STARTGATE().
Edit 2: Great! now i need to get button removed and start timeout when video starts.
var vid = document.getElementById("myVideo");
function myFunction(){
vid.play();
setTimeout(function(){
vid.pause();
}, 15000); //
setTimeout(function(){
RC_STARTGATE();
}, 15000); //
}
When the button is clicked, the video starts playing, and after 15 seconds you want it stopped?
var vid = document.getElementById("myvideo");
function myFunction(){
vid.play();
setTimeout(function(){
vid.pause();
}, 15000); //15 second timeout in milliseconds
}
EDIT 2
To remove the button, add an id (<button id="mybtn">) so you can reference and remove it like this:
var btn = document.getElementById("mybtn");
btn.parentElement.removeChild(btn);
Related
OBJECTIVE: Trying to autoplay when mouse is over the video itself.
HTML:
<video id = "litVideo" src="lt.mp4" onmouseover="over(this)" onmouseout="out(this)" controls>
JAVASCRIPT:
function over(element) {
alert("mouseover");
element.append(autoplay)
**also tried element.add(autoplay)**
}
function out(element) {
alert("mouseout");
element.remove(autoplay);
}
Problem: Mouseover is alerting. However, autoplay is not working. Please help.
use play() and pause() function
const video = document.getElementById("video")
video.onmouseover = function(){
video.play()
}
video.onmouseout = function(){
video.pause()
}
<video src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" controls id="video"></video>
However if you want to use your approach then use
element.setAttribute("autoplay")
I'm making several button that if I clicked it plays designated sounds each button, and stop the sounds if I clicked another button and plays that sound. And if I click again the button, the sound will repeat to the beginning. Thanks :)
javascript
$(document).ready(function(){
$('#menuIcon').mouseover(function(e) {
$('.bar1').addClass("hovered");
$('.bar2').addClass("hovered");
$('.bar3').addClass("hovered");
});
$('#menuIcon').mouseout(function () {
$(".bar1").removeClass("hovered");
$(".bar2").removeClass("hovered");
$(".bar3").removeClass("hovered");
});
});
function myFunction(x) {
x.classList.toggle("change");
$('.dropdown-menu').toggle();
}
function playSound() {
var sound= new Audio('sound campaign/10,000 Reasons.mp3');
sound.currentTime = 0
sound.play();
}
HTML
<input type="button" value="10,000 Reasons" onclick="playSound()" />
You should use the sound.pause(); to pause it.
If you would like to use multiple audios, you should use the HTML audio tag.
It would allow you to pause all of them at once.
example:
<input type="button" value="10,000 Reasons" onclick="playSound(0)" />
<audio src="sound campaign/10,000 Reasons.mp3" autoplay loop>
</audio>
function playSound(e) {
var sounds = document.getElementsByTagName('audio');
for(i=0; i<sounds.length; i++) sounds[i].pause();
var sounds = document.getElementsByTagName('audio')[e];
sound.currentTime = 0
sound.play();
}
Current code:
<script>
function play() {
var audio = document.getElementById("audio");
audio.play();
}
</script>
<button class="matrixBtn" value="PLAY" onclick="play()">star shopping</button>
<audio id="audio" src="xxx"></audio>
When I press the button the music starts, which is exactly what I want. But I also want if I press the button again that the music stops. How can I do this without create a second button?
the <audio> tag is a HTMLMediaElement, so it has a property .paused which you can use to determine the current state and act accordingly:
function playPause() {
var audio = document.getElementById("audio");
if(audio.paused)audio.play();
else audio.pause();
}
I'am trying to mute the audio of a video on click, but for some reason it won't mute..
html:
<video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"> </video>
<img src="button/audio_on.png" id="audio"/>
jquery/javascript solutions I have tried:
$('#audio').click(function() {
if( $("#background").prop('muted', true) ) {
$("#background").prop('muted', false);
alert('music paused');
} else {
$("#background").prop('muted', true);
alert('music playing');
}
});
Note: It does alert 'music paused' but never alerts 'music playing'
second method I've tried (note: it does change the img source):
//change music icon
$("#audio").on('dblclick', function(){
$("#audio").attr("src","button/audio_on");
document.getElementById("#background").volume = 1;
});
$("#audio").on('click', function(){
$("#audio").attr("src","button/audio_off");
document.getElementById("#background").volume = 0;
});
Does anyone know why it won't mute the audio of my video?
Try using the following code to toggle the audio of your video:
$("#audio").click( function (){
$("#background").prop('muted', !$("#background").prop('muted'));
});
When I add onclick="playPause()" to just one video it works great. I click the video and it'll play or pause just like I want it to. If I have more than one video, even if the videos have different IDs (for example: video id="v1" and video id="v2") whenever I click on one video it'll always play one specific video. Using this script on multiple videos seems to only allow play/pause toggling on one video. Here's the html and script I'm using:
<video id="v1" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v2" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v2");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
<video id="v3" width="480px" height="267px" controls onclick="playPause()">
<source src="S12E13%203%20Acts%20of%20God.mp4" type="video/mp4">
</video>
<script>
var myVideo = document.getElementById("v3");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause(); }
</script>
BTW: not a big deal, but I've noticed the original Play button doesn't work anymore when I use this script. Is there a way to fix that?
You can pass the clicked element as an argument to the function like onclick="playPause(this)", then you just have a single definition:
function playPause (video) {
if (video.paused)
video.play();
else
video.pause();
}
Or alternatively you can find all videos and bind event listeners to them iteratively using document.getElementsByTagName() or document.querySelectorAll():
document.querySelectorAll('video').forEach((video) => {
video.addEventListener('click', function (event) {
if (this.paused)
this.play();
else
this.pause();
});
});