I'm trying to create multiple links that when clicked, will change the source of the video being played on the player.
So far I have something that does ALMOST what I want to achieve:
HTML:
<video id="videoclip" width="640" height="480" controls preload="none">
<source id="mp4video" src="myvideo.mp4?dl=1">
</video>
<p>first video</p>
<p>second video</p>
<p>third video</p>
<p>fourth video</p>
Javascript:
videocontainer = document.getElementById('videoclip');
videosource = document.getElementById('mp4video');
newmp4 = 'newvideo.mp4?dl=1';
videobutton = document.getElementById("videolink1");
videobutton.addEventListener("click", function(event) {
videocontainer.pause();
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
}, false);
This works great. The problem is, the way the code is written, it will only allow me to change the first video into the second one and that's it. I want to be able to click the other links (videolink2, videolink3, etc) and change what video is being played to something else.
I already spend many hours looking at many other questions here but wasn't able to achieve my goal.
You need to think dynamic in situations like this. What you did to get one working is a good first stepping stone.
Each video link now has a data- attribute that holds the new source for that link.
Each video link also has the same class that way we can group them together using document.getElementsByClassName("videolink") which returns an array of elements with the classname videolink
Then run a loop over the returned array (which is a link element with the classname videolink) and add a click event on each one that calls the changeVideo function
this inside changeVideo refers to the element that was clicked. So we grab the data-videolink value using dataset property on the link element that was just clicked
Finally change the source of the video to that value.
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var videoButtons = document.getElementsByClassName("videolink");
for (var i = 0; i < videoButtons.length; i++) {
videoButtons[i].addEventListener("click", changeVideo, false);
}
function changeVideo() {
var newLink = this.dataset.videolink;
console.log("Changing video to source: " + newLink);
//videocontainer.pause();
//videosource.setAttribute('src', newLink);
//videocontainer.load();
//videocontainer.play();
}
<video id="videoclip" width="640" height="480" controls preload="none">
<source id="mp4video" src="myvideo.mp4?dl=1">
</video>
<p>first video</p>
<p>second video</p>
<p>third video</p>
<p>fourth video</p>
Related
I am using videojs as the framework for a JavaScript video player page I am working on, its working great & I have customised the playback controls which are inside a div to match the spec I wanted (hide controls on load & then only show when the user has clicked play and has hovered etc).
I am now trying to make sure that the video player works when there is multiple instances on 1 page i.e if I add 4 or 5 videos to a page. the basic video.js functionality features seems to work fine but the additional control functionality which I have implemented will only work on the first instance of the video on the page (& thats because its just standard JS looking for that class & theres no unique ID per video player).
Here is what I have for the HTML:
<div class="cb-article-media__container padding-top-sm padding-bottom-sm">
<div class="cb-article-media__video-block">
<div class="c-video-container">
<video id="videoPlayer" class="video-js vjs-default-skin video-cover" width="100%" height="100%" controls preload="none" poster="<?php echo esc_url($video_thumbnail_url); ?>"
data-setup='{}'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4'/>
</video>
</div>
</div>
</div>
<div class="cb-article-media__container padding-top-sm padding-bottom-sm">
<div class="cb-article-media__video-block">
<div class="c-video-container">
<video id="videoPlayer" class="video-js vjs-default-skin video-cover" width="100%" height="100%" controls preload="none" poster="<?php echo esc_url($video_thumbnail_url); ?>"
data-setup='{}'>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4'/>
</video>
</div>
</div>
</div>
and here is the JS:
var videoContainer = document.querySelector('#videoPlayer');
var videoControl = document.querySelector('.vjs-control');
var timeDivider = document.querySelector('.vjs-time-divider');
var timeDur = document.querySelector('.vjs-duration');
var fullScrControl = document.querySelector('.vjs-fullscreen-control');
$(document.body).on('click', '.vjs-fullscreen-control' , function(){
if (videoContainer && videoContainer.classList.contains('vjs-fullscreen') ) {
fullScrControl.className += " exit-full-screen";
} else {
fullScrControl.classList.remove("exit-full-screen");
}
});
$(document.body).on('click', '.vjs-big-play-button' ,function(){
// if (videoContainer.hasClass('vjs-playing')) {
videoContainer.className += " show-controls";
// }
});
How would I be able to make this JS/Jquery above work per instance of video player on the page (to show and hide the controls per player)? At present it only works for the first video player on the page.
Any help would be really appreciated.
Here is a codepen to the same issue:
https://codepen.io/nolimit966/pen/LYVyVzz
Thank you
Your HTML is incorrect - you have multiple elements with the same ID - videoPlayer. Each ID must be unique in its home subtree (document).
To fix this issue give each player a unique id, e.g.
<video id="videoPlayer1" ...
<video id="videoPlayer2" ...
In JS you just need make sure that you are controlling the correct player. To do this you probably just need to get the elements based on the control that was clicked rather than hard coding them.
You don't show the actual page markup - so this is a guess - but you want something like the following using "closest".
$(document.body).on('click', '.vjs-fullscreen-control' , function(){
// note this is a guess, it could be $(this).parent, is the player you want.
var player = $(this).closest('.video-js')
if(player.classList.contains('vjs-fullscreen')) {
player.closest('.vjs-fullscreen-control').className += " exit-full-screen";
} else {
player.closest('.vjs-fullscreen-control').classList.remove("exit-full-screen");
}
});
In any case the principal remains the same - remove your hardcoded selectors and target the elements relative to the target of the click handler. If this doesn't work then please provide the full mark-up of a video player showing all the elements such as '.vjs-control' and '.vjs-fullscreen-control'
I have a table which looks like this:
+------------+---------+
| Name | View |
+------------+---------+
| 1.mp4 | X |
| 2.mp4 | X |
+------------+---------+
X are view buttons.
When the user clicks on any of the view button, I want to show the corresponding video in a modal. I am using html5 video tag for that. In the video tag, I want to provide the src dynamically.
The src would be name of the video. I am using javascript for this.
HTML:
the X button:
<a data-toggle="modal" data-id={{name}} href="#Modal" class="preview">X</a>
<!--{{name}} is 1.mp4-->
modal:
...
<div class="modal-body">
<video width="548" height="455" controls>
<source id="vsrc" type="video/mp4">
Your browser does not support video playback.
</video>
</div>
...
JS:
var videoName = $(this).data('id'); //This is correct
document.getElementById('vsrc').src = videoName;
When I check the source code of the page, the src is correctly set,
<source id="vsrc" type="video/mp4" src="1.mp4">
But there is no video shown on the page, only an empty container and some disabled video control buttons are displayed.
I tried pasting this source code into the actual HTML page and it worked that way, I can't figure out why it doesn't work dynamically.
Set the video source directly like this...
var vid = document.getElementById('vid');
vid.src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4";
vid.play();
<div class="modal-body">
<video id="vid" width="548" height="455" controls>
Your browser does not support video playback.
</video>
</div>
What I am trying to do is to get popcorn.js to jump to a point in the video when a link is clicked. I tried using the below function, currentTime() but am unable to add the on click button to trigger the function.
http://popcornjs.org/popcorn-docs/media-methods/#currentTime
For the html side this is what I have.
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"> </source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"> </source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnotediv"></div>
<p id="click">Click me.</p>
This is what I have tried for the .js side
// create a popcorn instance
var $pop = Popcorn("#video");
// on click , switch the time back to 3 second
$pop.exec( document.getElementById("click").onclick, function() {
this.currentTime( 3 );
});
// play the video
$pop.play();
Can anyone help me point to what am I doing wrong? I am still trying to find my feet with this.
I think this is a syntax problem try this:
// create a popcorn instance
var $pop = Popcorn("#video");
// on click , switch the time back to 3 second
$pop.exec( document.getElementById("click").onclick, function() {
$pop.currentTime = 3;
});
// play the video
$pop.play();
I am trying to change videos dynamically in my web page using JavaScript. The first video (.mp4 format) file is playing well, but when I click the button to change the video, it is showing some black screen instead of playing next video.
I tried in many ways to solve this issue by reading many Stack Overflow articles, but it is still not working.
Could anyone please guide me to solve this issue?
My JavaScript code:
function vidSwap() {
var player = document.getElementById("player");
player.pause();
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
document.getElementById("mp4").src = "D:\movies\Telugu\movie2.mp4";
document.getElementById("ogg_src").src = "D:\movies\Telugu\movie2.ogg";
player.load();
player.play();
}
My HTML Code:
<video id="player" height="380" width="440" controls>
<source id="webm" src="D:\movies\Telugu\movie1.webm" type="video/webm" />
<source id="mp4" src="D:\movies\Telugu\movie1.mp4" type="video/mp4" />
<source id="ogg_src" src="D:\movies\Telugu\movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />
Your problem is in the vidSwap function: When you're setting the src attribute of each of the elements, the backslashes in the strings you're using are being interpreted as escaped characters.
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
// ^^ ^^ ^^
You need to escape the backslash characters by adding an extra backslash before each (\\), like so:
document.getElementById("webm").src = "D:\\movies\\Telugu\\movie2.webm";
// Repeat for each string
Happy coding!
I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.
Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.
Thanks for your help and advice, always!
HTML:
<div class="thumbnail" id="paparazzixxx">
<a href="javascript:playPause();">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
JavaScript:
<script type="text/javascript">
function playPause() {
var song = document.getElementsByTagName('audio')[0];
if (song.paused)
song.play();
else
song.pause();
}
</script>
jQuery is awesome for this sort of thing. It gives you the ability to easily manipulate elements based on their relationship to other elements in the DOM tree. In your example you want to be able to make the <a> elements only affect the <audio> elements that are right next to them when clicked.
The problem with your current Javascript code is that it is actually just grabbing only the first audio element on the entire page.
Here's how you can change your code to support an unlimited number of <a> & <audio> pairs.
Add a class to the <a> tag ('playback' in my example)
Replace the href attribute with a '#'
Then use jQuery to attach a handler to the click event for elements with that class.
HTML
<div class="thumbnail" id="paparazzixxx">
<a class="playback" href="#">
<img id="play" src="../images/icons/35.png" />
</a>
<audio id="paparazzi">
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
Your browser does not support HTML5 audio.
</audio>
</div>
Javascript
<script type="text/javascript">
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
// This next line will get the audio element
// that is adjacent to the link that was clicked.
var song = $(this).next('audio').get(0);
if (song.paused)
song.play();
else
song.pause();
});
});
</script>