I'm trying to build some thing like a video gallery which you can select a video to show up by clicking on its thumbnail. Now I'm at phase of loading appropriate subtitles for the chosen video. Thanks to google I understand that videojs has a method to help me called addTextTrack() but unfortunately there is not a good sample or documentation for it. After all I tried to find its parameters and behavior via reading the video.dev.js codes. but as I understand this method has just three params (kind, label, language) and the thing that I didn't understand is that: How can I set the src to load the subtitle file. I think its a bug and it doesn't work properly and I want to report it if you're agree with me.
The following code adds cc icon to the player but it doesn't show the subtitle (How can it be shown when I didn't tell him the URL to load)
var myPlayer = videojs('video-id');
myPlayer.addTextTrack('captions', 'En', 'English');
I checked videojs 5.0.0 addTextTrack method and there wasn't any significant changes.
After about a month without any answer to my question, I don't know yet why addTextTrack() doesn't work properly. But thanks God, I found a way to achieve my goal:
To dynamically changing all text tracks
var oldTracks = player.remoteTextTracks();
var i = oldTracks.length;
while (i--) {
player.removeRemoteTextTrack(oldTracks[i]);
}
myNewTracks.forEach(function(track) {
player.addRemoteTextTrack(track);
});
The text track did never get updated dynamically and after a long search, I had found a solution for my problem. When I change the video source I replace the text track and set it on mode="showing":
let player = videojs('first-player');
player.addRemoteTextTrack({
kind: 'captions',
src: 'my-track-path.vtt',
mode: 'showing'
}, false);
Related
I would like to make a video blog and use multiple video players, youtube and jwplayer. How would I make it so that youtube player appears by default and below it there is a button, when the button is pressed, the jwplayer appears and replaces youtube.
If anyone could tell me the code to use, that would be awesome and thanks to everyone in advance for helping!
Knocked you up a simple example:
http://jsfiddle.net/xxktz511/4/
It uses this single bit of javascript and the jQuery framework to change a child element of a parent blog item. As from what you are saying you will have many blog entries on the page.
// Use the jQuery plugin to find all DOM element that have a class of 'switch player'
// You can read up on jquery here: http://jquery.com/
$('.switch_player').click(
function(e) {
// Make a jQuery instance based on the 'currentTarget' or 'click' element
// Find that element parent that is the actual blog entry
var $blogEntry = $(e.currentTarget).parent();
// Then find all children that have either a youtube_video class or
// jqPlayer class and toggle their display status
$blogEntry.children('.youtube_video').toggle();
$blogEntry.children('.jwplayer_video').toggle();
}
);
If the video timing is the same then jwplayer can start a stream from a given point. It is in the documentation. However I do not know how you get the current time from youtube.
Let me know if you have any questions about the design.
do you mean something like this. Warning didnt test code myself but should work.
<form method="post">
<input name="button" type="submit" />
</form>
<?php
if (!empty('$_POST')){
//jwplayer video
}
else{
//youtubevideo
}
?>
This is a page I'm currently working on as a project
$(function() {
$(".modal-launcher, #modal-background").click(function() {
$(".modal-content, #modal-background").toggleClass("active");
$(".vid-1i").attr("src", "link1");
$(".vid-2i").attr("src", "link2");
$(".vid-3i").attr("src", "link3");
$(".vid-4i").attr("src", "link4");
$(".vid-5i").attr("src", "link5");
$(".vid-6i").attr("src", "link6");
$(".vid-7i").attr("src", "link7");
$(".vid-8i").attr("src", "link8");
//$('html').toggleClass('active').css('top', -(document.documentElement.scrollTop) + 'px');//
});
});
above the actual links are replaced just to display a quick idea of the bad jQuery.
In it, I am attempting to create my own popup launcher for videos; however, I am having trouble using jQuery to replace the "" src of an iframe element to a YouTube link. I am unable to figure out why the jQuery is not working. I understand that the jQuery is, of course, working properly, and that it is me who has written the code incorrectly, but here I am asking if anyone is able to figure out what it is I've done wrong, or what can be changed to make it work.
For some reason, the last video in the jQuery list is always the one retrieved.
Understand that the images are missing from the page due to them being local files and not network locations. Clicking above the captions that read like "Match One" will have the "intended" result, regardless if the image is showing or not.
Coming back to this and understanding more of JavaScript and jQuery, my problem was simply misunderstanding the code. In order to do something like this, one function per link would be more suitable.
function video1()
{
$("#popup, #modal-background").toggleClass("active");
$("#popup").prop("src", "https://www.youtube.com/embed/7h1s15n74r3all1nk");
document.getElementById('scroll').style.cssText ='overflow:hidden';
}
complementary html would look like this:
<div onclick="video1()"></div>
The previous code would run each line, effectively setting the last link as the source of the element. The new code is button independent, ensuring only one link belongs to each button.
I am trying to figure out the method for switching audio tag source. In this example I am getting the source from a list, however I'm not sure how to do it.
Here is the fiddle: jsfiddle.net/4vrR2/9
Any advice on making it work would be appreciated :)
To change the attribute you need to specify setAttribute("src",value) instead of src:
http://jsbin.com/zexoweyu/1/edit
function changeSong() {
var element = document.getElementById("audioPlayer")
element.setAttribute("src","magic");
}
PS: To see the change in the DOM open the browser devtools, since JSBin will not reflect the change in the source code tab.
ISSUE: IE version 7 and 8 is not showing updated IMG SRC change done in JavaScript
You can see what I mean if you go to the URL below, and on the left under (3) I want a different liner, you choose one of the swatches; lets say you choose "Asahi Chartreuse". Notice nothing happens to the preview on the left. BUT then if you go ahead and choose another swatch, you will see the preview on the left shift to show Asahi Chartreuse. So it is one behind. This is why I believe it is a "refresh" issue. It works in Chrome just fine.
In IE: Notice if you click on some other control, the refresh happens.
You can see the code here: https://www.casemodo.com/test.asp
WHAT I'VE TRIED SO FAR:
I've tried adding headers to say "no-cache".
I've tried adding "?" and random number after the png file name.
I've tried setting focus() to the image after changing the src.
I've tried, after changing src, telling the style.display to be hidden and then visible.
I've tried creating a hidden (and not hidden) text input box on the page and then setting focus() to it after changing img src.
I've tried setting window.focus().
I've tried (as you see now) setting an alert after changing the src.
GUESS: What it looks like now is the JavaScript engine just pauses after I set that src UNTIL you manually click (focus) somewhere else on the screen. So it never even gets to all of those scripts I've tried above.
Set the src attribute to null, then set it to your new url:
in jquery:
var myImg = $('#myImg');
myImg.attr('src', null);
myImg.attr('src', newUrl);
in straight js:
var myImg = document.getElementById('myImg');
myImg.src = null;
myImg.src = newUrl
This worked for me - it was driving me mad!
Try to use onclick instead of onchange. The latter doesnt work well with some form elements in some browsers.
I've seen similar IE issues solved with a seemingly bizarre reassignment of innerHTML. Suppose "container" is a variable referencing the parentNode of the img. Try "container.innerHTML = container.innerHTML". This triggers a re-rendering and may bring the errant img to life.
Comments on the question:
Please include a code snippet in the question.
Was the javascript in an onchange event, or where?
If the client browser is Google Chrome, does it work?
(Sounds like yet-another-IE-image-src-bug.)
The demonstration page you linked to has been changed since this question was posted;
as I write this, clicking on a swatch causes submit which causes load of a different page.
A suggestion:
Use setTimeout, so that the actual change occurs when the timeout event fires, instead of in the original GUI event thread.
For example, if the original javascript was
SomeFunction();
change this to
setTimeout(SomeFunction, 10);
(where image.src = newURL; is done inside SomeFunction)
This question is probably no longer relevant but we ran into the same issue today when we checked backward compatibility for one of our libraries.
The only thing that worked for us was to replace the image element by itself before changing the value for the src attribute:
var myImg = document.getElementById('myImg');
myImg.parentNode.replaceChild(myImg, myImg);
myImg.src = newUrl;
I was working with a Lazy Loading implementation, and got to a similar problem. For some reason, after changing the data-srcset attributes to srcset in code, even with the other approaches described on this page, the elements still didn't seem to get the new attributes values. After some research, I got to this page on github, about a bug fix on a lazy loading plugin. It gave me the idea to, instead of using the replace option described here, or the your_element.src=null approach, to use something like this:
your_element.setAttribute("src", your_element.getAttribute("data-srcset"));
And it ended up working for me.
I am trying use JS to playback some sounds. What i want to do is have piece of music playing but after a certain time replace it with another audio file. I thought the most effective way would be to reuse the same audio object, but it seems to not kill the original sound so all gets messy. What is the best way to do this?
My code is below, all im doing is passing in a new source at a certain time
function inGameSndCreate(src) {
inGameSnd = new Audio(src)
inGameSnd.loop = true;
inGameSnd.play();
}
thanks in advance
I expect you'll need to change the source in the DOM using JavaScript. The following should work.
document.getElementById('audio_id').src = 'different_file.wav';