I am building a video website, when user clicks on a picture related video runs. But the problem is that first time a user have to double click on a link, after that single click works.
Here's html:
<div id="player_container">
<video controls="controls" id="videoclip" autoplay>
<source id="mp4video" src="videos\video.mp4" type="video/mp4" />
<source id="oggSource" src="video.mp4" type="video/ogg">
<p> Your browser does not support the video tag <p>
</video>
<div class="vid_container_row2">
<div class="shadow2">
<div>
<a href="#" onclick="myFunctionId(this.id);" id="videolink1">
<img class="top" src="images/gayle1.jpg" height="80px" width="110px">
</a>
</div>
</div>
<div class="shadow2">
<div>
<a href="#" onclick="myFunctionId(this.id);" id="videolink2">
<img class="top" src="images/rohit-sharma.jpg" height="80px" width="110px">
</a>
</div>
</div>
<div class="shadow2">
<div>
<a href="#" onclick="myFunctionId(this.id);" id="videolink3">
<img class="top" src="images/blara.jpg" height="80px" width="110px">
</a>
</div>
</div>
</div>
</div>
here is my javascript code:
<script type="text/javascript">
function myFunctionId(id){
var jungi = id;
if (jungi == "videolink1")
{
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var videobutton = document.getElementById('videolink1');
var newmp4 = 'videos/video.mp4';
videobutton.addEventListener("click", function(event) {
videocontainer.pause();
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
}, false);
}
else if (jungi == "videolink2")
{
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var videobutton = document.getElementById('videolink2');
var newmp4 = 'second_video.mp4';
videobutton.addEventListener("click", function(event) {
videocontainer.pause();
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
}, false);
}
else
{
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var videobutton = document.getElementById('videolink3');
var newmp4 = 'third_video.mp4';
videobutton.addEventListener("click", function(event) {
videocontainer.pause();
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
}, false);
}
}
</script>
When you click the link
<a href="#" onclick="myFunctionId(this.id);" id="videolink3">
You are executing the function that adds a click handler to the element. To now activate this click, you will have to click it again. To add the event listeners on load, remove the onclick attributes from your elements and simply pre-apply the function to your DOM like this:
var videobutton1 = document.getElementById('videolink1');
var videobutton2 = document.getElementById('videolink1');
var videobutton3 = document.getElementById('videolink1');
[videobutton1, videobutton2, videobutton3].forEach(function(button){
myFunctionId( button.id )
});
It's a bit of a roundabout way (you should not have to find by id and then pass the id, you could just pass the elements around), but it works.
A potentially better way is to structure your dom a little better. here is an example:
var videoPath = document.querySelector('h1'); // This is for debugging on Stack Overflow - there are no videos here so nothing will display. We will change this value to show it is working.
var video = document.querySelector('video'); // get the main video element
var links = document.querySelectorAll('.changeVideoSource'); // get all links marked with the class changeVideoSource
for(var i = 0; i < links.length; i++){
links[i].addEventListener('click', function(e){
e.preventDefault(); // Prevent following the link
video.src = this.getAttribute('href'); // set the source
videoPath.textContent = this.getAttribute('href'); // show the update as the videos are not available here
video.play(); // Although your video hasn't loaded yet, the system will actually try to start playing as soon as it can.
})
}
video { width: 100%; height: 200px; background: #000; }
Video 1
Video 2
Video 2
<h1>video1.mp4</h1>
<video src="video1.mp4"></video>
This is much simpeler, and adding another video link is now super easy! Also, as an added bonus, people with disabled javascript still have access to the videos as the link will now just be followed.
video.load() starts the loading process, but returns before the video is loaded, and hence the play immediately following it doesn't work as it isn't loaded yet. You need to use :
video.addEventListener('canplaythrough', function() {
// Video is loaded and can be played
}, false);
For one section:
var videocontainer = document.getElementById('videoclip');
var videobutton = document.getElementById('videolink3');
var newmp4 = 'third_video.mp4';
videobutton.onclick = null;
videocontainer.src = newmp4;
videocontainer.load();
videocontainer.oncanplay = function (e) {
videocontainer.play();
}
videobutton.onclick = function (e) {
myFunctionId(id);
}
Related
After uploading the videos into the server, and you try to watch by clicking the play button the videos with the (.mp4) format plays well smoothly but the (.mov) video plays out of sync, like the voice delays, but if you download it, it plays normally with no problem. I don't know what could be the problem and the potential solution for it. I've tried Preloading but did not work.
My HTML the src is placed dynamically
<div class="video-player" id="videoPlayer">
<video width="100%" controls autoplay id="talentVideo">
<source src="" type="video/mp4">
<source src="" type="video/qt">
</video>
<i class="fas fa-times close-btn" onclick="stopVideo()"></i>
</div>
My Js code:
<script>
var videoPlayer = document.getElementById("videoPlayer");
var talentVideo = document.getElementById("talentVideo");
function stopVideo(){
videoPlayer.style.display = "none";
talentVideo.pause();
talentVideo.currentTime = 0;
}
const playVideoBtn = document.querySelectorAll('.video-tal .pathLinkToPlay');
for(let i = 0; i < playVideoBtn.length; i++){
// playVideoBtn[i].addEventListener("click", function(){ alert("Hello World!"); });
playVideoBtn[i].onclick = ()=>{
var videopath = playVideoBtn[i].getAttribute('data-id'); //getting the url of clicked video
window.videoPlayingId = playVideoBtn[i].getAttribute('id'); //getting the id of clicked video
window.roleId = playVideoBtn[i].getAttribute('data-role-id'); //getting the role_id of clicked video
window.talentId = playVideoBtn[i].getAttribute('data-talent-id'); //getting the talent_id of clicked video
playVideo(videopath);
}
}
function playVideo(videopath){
talentVideo.src = videopath;
videoPlayer.style.display = "block";
}
I’d like to be able to specify my video sources for my toggle button in the HTML document so that I don’t have to include them in the JavaScript code.
I figured out a way to accomplish it by hiding the URLs in div tags as id attributes and then getting them in the JavaScript by their class name. (See below). This seems like a total hack. I’m sure there must be a better way to do this. Any suggestions?
<!DOCTYPE html>
<html>
<body>
<div class="video1" id="http://www.w3schools.com/html/mov_bbb.mp4"></div>
<div class="video2" id="http://www.w3schools.com/html/movie.mp4"></div>
<button onclick="Harmonica(this,'myVideo')" type="button"> Video 2</button>
<video height="auto" width="500"id="myVideo" controls autoplay loop class="myvideo">
<source id="mp4_src" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
<script>
var vid = document.getElementById("myVideo");
var statusElement = document.getElementById("status");
var currentlyPlaying = 1;
var currentlPlayingTime;
var src1 = document.getElementsByClassName("video1")[0].id;
var src2 = document.getElementsByClassName("video2")[0].id;
function Harmonica(btn,myVideo) {
currentlPlayingTime = vid.currentTime;
if (currentlyPlaying === 1) {
vid.src = src2;
currentlyPlaying = 2;
btn.innerHTML = "Video 1";
} else {
vid.src = src1;
currentlyPlaying = 1;
btn.innerHTML = "Video 2";
}
vid.load();
vid.addEventListener('canplay', function () {
vid.currentTime = currentlPlayingTime;
}, false);
}
</script>
</html>
<html>
<body>
<audio autoplay id ="audio_1" src = "./Dusty.wav"></audio>
<audio loop id = "audio_2" src = "./Dusty3.wav"></audio>
<audio loop id = "audio_3" src = "./Dusty2.wav"></audio>
<!-- <input type = "button" value = "play" onClick="audiofun();" -->
</body>
<script>
// audiofun()
// {
var audio = document.getElementById("audio_1");
var audio2 = document.getElementById("audio_2");
var audio3 = document.getElementById("audio_3");
// audio2.pause();
// audio3.pause();
audio.addEventListener("ended", function () {audio2.play();})
audio2.addEventListener("ended", function () {audio3.play();})
// }
</script>
</html>
When I run this code audio2.play() is continuously playing and audio3.play is not at all playing. can anyone put light on my error... thanks in advance
i feel like your problem comes from the property "loop" in your audio tag. Maybe you should try:
<audio id = "audio_2" src = "./Dusty3.wav"></audio>
<audio id = "audio_3" src = "./Dusty2.wav"></audio>
And add a event listener on your first, then second audio.
var audio = document.getElementById("audio_1");
var audio2 = document.getElementById("audio_2");
var audio3 = document.getElementById("audio_3");
document.getElementById('audio_1').addEventListener('ended',audio_1Handler,false);
function audio_1Handler(e) {
audio2.play();
}
document.getElementById('audio_2').addEventListener('ended',audio_2Handler,false);
function audio_2Handler(e) {
audio3.play();
}
the snippet above is highly inspired of : this post
Hopefully this helps you.
Feel free to ask any further questions !
I currently have a full screen background video which I have looping with audio, I want to make a custom button so when visitors visit the site can mute/unmute the audio.
I have tried using this code...
<video id="bg" loop autoplay preload="auto" poster="../img/still.jpg">
<source src="vid/vidbg2.mp4" type="video/mp4" />
<source src="vid/vidbg.webm" type="video/webm" />
<source src="vid/vidbg.ogv" type="video/ogg" />
Your browser does not support this video
</video>
<div id="video_controls">
<button id="mutebtn">mute</button>
</div>
And the JavaScript
<script>
var mutebtn;
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click,vidmute,false");
}
function.vidmute(){
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
Think I might be barking up the wrong tree?
Any help would be great thanks!
looks like three small changes where needed
1/ quotes only around the click not the whole of the addEventListener parameters
2/ call the initialize
3/ remove extra period from function.vidmute
<script>
var mutebtn;
intitializePlayer() // **don't forget to call the initialize**
function intitializePlayer(){
//set object references
vid = document.getElementById("bg");
mutebtn = document.getElementById("mutebtn");
//add event listener
mutebtn.addEventListener("click",vidmute,false); // **quotes only around the event**
}
function vidmute(){ // **there was an extra '.' between function and vidmute**
if(vid.muted){
vid.muted = false;
mutebtn.innerHTML = "mute";
} else {
vid.muted = true;
mutebtn.innerHTML = "Unmute";
}
}
</script>
on an website I have a simple video player tag and a list of videos. Onclick to an element of the videolist I change the poster and src attribute of the video tag an den src and type of the source-tag inside the video tag.
This all works fine in FF and IE but it don't works in chrome.
VideoTag
<video id='video' class='video-js vjs-default-skin' controls preload='none' width='640' height='320' poster='./poster/dummy.png' data-setup='{}' preload='none'>
<source src='./video/BeHappyToBeAlive.mp4' type='video/mp4'>
<track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
Your Browser does not support video tag. Please update your Browser.
</video>
JavaScript
$(document).ready(function(){
var videoChanging = false;
function changeVideo(videoTag) {
var video = videoTag.children().first();
var src = video.children('source');
var title = video.parent().find('h3').html();
var description = video.parent().find('p').html();
var poster = video.attr('poster');
var source = video.children().first().attr('src');
var mainVideo = $('#video_html5_api');
var mainVideoBox = $('#video');
mainVideo.children('source').remove();
mainVideo.prepend(src.clone());
mainVideo.attr('poster', poster);
mainVideo.attr('src', source);
mainVideoBox.parent().find('h3').html(title);
mainVideoBox.parent().find('p').html(description);
document.getElementById('video_html5_api').load();
videoChanging = false;
setTimeout(function(){
document.getElementById('video_html5_api').play();
}, 200);
}
$('.videoListItemBox > a ').on('click', function () {
if( videoChanging ){
return;
}
document.getElementById('video_html5_api').pause();
var video = $(this);
videoChanging = true;
var changeMovieCallback = function(){ changeVideo( video ); }
var t = setTimeout(changeMovieCallback, 200);
});
});
When I add an alert to the beginn of the changeVideo(videoTag) function it will works fine in chrome.
Can somebody explain my why and give me a solution to fix this problem?
It might be the preload='none' property on your video element. But it is hard to tell - your sample is too complex. How about something simple?
<video id='video' controls width='640' height='320'>
Your Browser does not support video tag. Please update your Browser.
</video>
<div class= "videoListItemBox">
<a href="#" data-src="http://html5demos.com/assets/dizzy.mp4"
data-poster="http://lorempixel.com/640/320/">video 1</a>
<a href="#" data-src="http://techslides.com/demos/sample-videos/small.mp4"
data-poster="http://lorempixel.com/640/320/">video 2</a>
<div>
code:
$(function(){
$('.videoListItemBox > a ').on('click', function (e) {
var link = $(this);
$('#video')
.attr('poster', link.data('poster'))
.attr('src', link.data('src'))
.get(0).play();
e.preventDefault();
});
});
See this jsbin: http://jsbin.com/bamafaki/2/edit
Do note that *.mp4 files are not supported on all browsers, so you should expand your code to include *.webm files as a fallback.
This reason why the newly selected video is loading on alert message box is that it causes postback which is when the video is loaded.