How to change video source onclick? - javascript

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';
}
});

Related

how to make my video play when hover on it with pure javascript

i try to do this with many different way but i didn't get the result i want so can anyone help
<div style="width:500px;height:500px;">
<video controls autoplay width="400" height="400">
<source src="video/2.mp4" type="video/mp4">
</video>
</div>
and here is the only answer i found when i search but i dont understand it well and there is jquery on it i want to make it pure javascript
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
The answer is pretty simple:
document.getElementById("myVid").addEventListener("mouseover", function() {
this.play();
});
document.getElementById("myVid").addEventListener("mouseleave", function() {
this.pause();
});
<div style="width:500px;height:500px;">
<video id="myVid" controls autoplay width="400" height="400">
<source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This should work for you.
You can find more information here about HTML5 video API.
const videoPlayer = document.querySelector('.videoplayer');
videoPlayer.addEventListener('mouseover', () => {
videoPlayer.play();
});
<p>Hover canvas to play the video</p>
<video class="videoplayer" width="320" height="240">
<source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>

Javascript / Mute video sound at start

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 });

how to make an array with several id's to a video tag with javascript jquery

I am using a custom build html5 video. The video tag has an unique id. Now i want to create several video tags.
This is how it works wit only 1 video:
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test.mp4" type="video/mp4" />
</video>
the js:
$(document).ready(function(){
var video = $('#myVideo1);
// stuff goes her...
So: how can i make several video tags with each his own id and trigger with javascript on these id's?
How to handle with several videos, independent from each other like below?
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test1.mp4" type="video/mp4" />
</video>
<video id="myVideo2" controls preload="auto" width="600" height="350" >
<source src="test2.mp4" type="video/mp4" />
</video>
<video id="myVideo3" controls preload="auto" width="600" height="350" >
<source src="test3.mp4" type="video/mp4" />
</video>
Code to start the video:
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':0}, 500);
$('.caption').stop().animate({'top':0}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':-45}, 500);
$('.caption').stop().animate({'top':-45}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});
You can always select the actual element instead of relying on id's.
$(document).ready(function(){
$('video').each(function(){
var video = $(this);
// Do the rest of the instructions.
});
});

HTML5 Video autoplay in Android

I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance
Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source

Audio controls won't show when button is clicked JavaScript

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';
}

Categories

Resources