I have a problem, I am implimenting JavaScript into my website to show the audio controls when the button is clicked. I have the controls hidden with CSS and I need JavaScript to show the controls when my button is clicked. Here is my code.
<video id="videoBackground" poster="img/loading.gif" onload="function()" width="1920" height="1080" preload="auto" onprogress="animCD_onprogress();" onended="animCD_start();">
<source id="colorVid_mp4" type="video/mp4" src="img/luther_color.mp4">
</video>
<audio id="audioInterview" preload='auto' controls>
<source src="audio/interview.mp3" type="audio/mpeg">
</audio>
<div class="buttonSkip" onclick="window.location='http://www.lrltv.org/muslims-nuclear.html'"></div>
<div id="buttonPlacement" class="buttonPlacement">
<div onclick="showAudio('audioInterview')"; class="btnDonate"></div>
<div onclick="alert('Clicked Buy');" class="btnBuy"></div>
</div>
<!-- Show Audio when button is clicked -->
<script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
</script>
function showAudio('audioInterview')
{
var obj=document.getElementById('audioInterview');
obj.className = 'show';
}
is wrong, it should be
function showAudio(controlId)
{
var obj=document.getElementById(controlId);
obj.className = 'show';
}
Related
I need a Mute/Unmute button and an tag that can only mute the sound of a video when clicked.
The mute/unmute button works fine, but the <a tag doesn't do anything
<!DOCTYPE html>
<html>
<body>
<div>
<video src="video.mp4" id="vid"autoplay muted loop></video>
<div class="controller">
<button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
Stop Sound
</div>
</div>
<script>
var my = document.getElementById("vid");
const playVideo=() => {
my.play();
}
function muteUnmuteVideo(){
my.muted = !my.muted;
}
let exitvid = document.getElementById("vid");
function stopSound(){
exitvid.muted = false;
}
</script>
</body>
</html>
Why are you using the js code
try to use built in video tag you can get the controllers by default
<video controls muted width="80%" height="50%">
<source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4/" type="video/mp4">
</video>
I'm working on a webpage with videos.
When refraishing the page, I want to randomly start a muted video. After rolling on it, the video is unmute.
I've already done the randomly videos javascript but I can't mute the video...
When I launch the page, the video starts with sound...
Here is my code :
<div id="mixmen" onmouseover="play()" onmouseout="mute()" onclick="location.href='http://ap-mixmen.com/','_blank'" >
<div class="video">
<section id="videos">
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen2.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen3.mp4" type="video/mp4"></video>
<video id="videos" preload="none" style="height:100%">
<source src="imgs/mixmen4.mp4" type="video/mp4"></video>
</section>
</div>
<script>
(function () {
"use strict";
document.getElementById("videos").muted = true;
var videosSection = document.getElementById("videos");
var videosSectionClone = videosSection.cloneNode();
var videos = videosSection.getElementsByTagName("video");
var randomVideo = videos.item(Math.floor(Math.random() * videos.length)).cloneNode(true);
randomVideo.removeAttribute("controls");
randomVideo.setAttribute("preload", "auto",);
videosSectionClone.appendChild(randomVideo);
videosSection.parentNode.replaceChild(videosSectionClone, videosSection);
randomVideo.play();
})();
var videosSection = document.getElementById("videos");
function play()
{
video.muted = false;
}
function mute()
{
video.muted = true;
}
</script>
</div>
Do you know why it doesn't work ?
try adding muted to the video tag
Ex:
Try adding "muted" to the video tags.
<video id="videos" preload="none" muted style="height:100%">
<source src="imgs/mixmen.mp4" type="video/mp4"></video>
Hi First section id must be different to your video tags then your video tags also must have a different id and finally you apply the "muted=true" to your selected element . If you want to mute all videos on the page load you can access to them by tag name then apply the mute as follow :
const videos= [...document.getElementsByTagName('video')];
videos.forEach((video) => { video.muted = true });
HTML:
<div class="source" id="source_one" onclick="chnageToSourceTwo()">
Source 1
</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source src="example_video_1.mp4" type='video/mp4' />
</video>
Script:
function chnageToSourceTwo() {
document.getElementById("example_video_1").src="example_video_2.mp4";
}
The video source is not changing after clicking on div. I am using the Video.js plugin to add video player to my webpage.
Does anyone know how to change source of video onclick?
jsFiddle http://jsfiddle.net/ah1fj7te/
It would be easier is to give your <source> object an ID. and reference the object by the ID using document.getElementById and document.addEventListener
Change your HTML:
<div class="source" id="source_one">Source 1</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source id="source_video" src="example_video_1.mp4" type='video/mp4' />
</video>
<script>
document.getElementById('source_one').addEventListener('click', function() {
document.getElementById('source_video').src = 'example_video_2.mp4';
});
</script>
Change this line:
document.getElementById("example_video_1").src="example_video_2.mp4";
With this:
document.getElementById("example_video_1").getElementsByTagName('source')[0].src="example_video_2.mp4";
I noticed you tagged this as jQuery, so here is how you would implement this in jQuery.
$("#example_video_1 source").attr("src", "example_video_2.mp4");
Here is a DEMO
And here some code:
var a = document.getElementById('source_one');
a.addEventListener('click',function() {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
alert(document.getElementById('example_video_1').children[0].src); // just to show that it is changed...
});
If you want to be able to toggle both videos, use this:
DEMO
var a = document.getElementById('source_one');
var b = document.getElementById("example_video_1");
a.addEventListener('click',function() {
if (document.getElementById("example_video_1").children[0].src == 'http://fiddle.jshell.net/_display/example_video_2.mp4') // replace with real url
{
document.getElementById("example_video_1").children[0].src="example_video_1.mp4";
a.innerHTML = 'Source 1';
}
else {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
}
});
I'm trying to build a page that displays only one video and when we press a button the video is changed to another, but thay all need to stay in sync, because video1 has audio and the other ones needs to be synced to make sense.
Here's what I got, i'm really a noob so sorry for the giant code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
var vid1 = document.getElementById("video1");
var vid2 = document.getElementById("video2");
var vid3 = document.getElementById("video3");
var vid4 = document.getElementById("video4");
var vid5 = document.getElementById("video5");
var vid6 = document.getElementById("video6");
if(
$(".button1").click(function(){
$(".video1").show();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button2").click(function(){
$(".video1").hide();
$(".video2").show();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button3").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").show();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button4").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").show();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button5").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").show();
$(".video6").hide();
}
));
if(
$(".button6").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").show();
}
));
});
</script>
</head>
<body>
<div class="video1">
<video id="video1" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely1.mp4" type="video/mp4">
</video>
</div>
<div class="video2">
<video id="video2" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely2.mp4" type="video/mp4">
</video>
</div>
<div class="video3">
<video id="video3" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely3.mp4" type="video/mp4">
</video>
</div>
<div class="video4">
<video id="video4" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely4.mp4" type="video/mp4">
</video>
</div>
<div class="video5">
<video id="video5" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely5.mp4" type="video/mp4">
</video>
</div>
<div class="video6">
<video id="video6" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely6.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="button1">
<button>Camera 1</button>
</div>
<div class="button2">
<button>Camera 2</button>
</div>
<div class="button3">
<button>Camera 3</button>
</div>
<div class="button4">
<button>Camera 4</button>
</div>
<div class="button5">
<button>Camera 5</button>
</div>
<div class="button6">
<button>Camera 6</button>
</div>
</div>
</body>
</html>
I've hacked together a working fiddle prototype; definitely not the most efficient it could be, but it works.
http://jsfiddle.net/3BmDx/
Basically, the way that it works is that the javascript will handle the clicks and will play all of the videos instead of using the 'autoplay' tag. You may want to look into pre-loading the videos before running that .play() for them. Something like:
var videos = 6;
var loaded = 0;
$(video).on("load", function() {
loaded++;
if(loaded==videos) {
// all videos have been loaded on the page, now .play() them
}
}
jQuery is handy because if you want to apply a .hide() to all of the video elements on the page at once, you can simply use $('video').hide() and jQuery will match all video tags.
I use this to my advantage in the reset(b) function. the reset(b) function is called each time a button click is pressed and it will re-enable all buttons, deactivate the current button (helpful for knowing which you selected) and then hide all the videos on the page. Afterward the correct video will be shown.
$(document).ready(function(){
// hide all of the video tags
$("video").hide();
$("button").removeAttr("disabled");
$.each($("video"), function(i,e) {
$(e)[0].play();
});
function reset(b) {
$("button").removeAttr("disabled");
$(b).attr("disabled", "disabled");
$("video").hide();
}
// handle button click for video to show
$("#button1").click(function() {
reset($(this));
$("#video1").show();
});
$("#button2").click(function() {
reset($(this));
$("#video2").show();
});
$("#button3").click(function() {
reset($(this));
$("#video3").show();
});
$("#button4").click(function() {
reset($(this));
$("#video4").show();
});
$("#button5").click(function() {
reset($(this));
$("#video5").show();
});
$("#button6").click(function() {
reset($(this));
$("#video6").show();
});
});
You can use the synchronisation code I used. The essential part is
if (Math.abs(other.currentTime - first.currentTime) > maxDrift) {
// sync all times of videos to first
other.currentTime = first.currentTime;
}
Although this approach works for some cases there are some issues. Browsers synchronise on keyframes, which you have to make sure are in the video. Also lower frame rates (fps<10) tend to be very buggy.
I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;