Develop Reference

Dynamically change videojs captions with addTextTrack()

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

Javascript - change audio tag src from list

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.

IE is not showing updated IMG SRC change done in Javascript

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.

How can I retrieve an image path from another page using JS?

This is my case: I have a page with a banner that will be frequently updated, this means the image path of the banner will be different each time the page is updated (can't be overwritten). Anyway, it will be inside a div or container with a constant name.
What I need to do is retrieve that image path and print it in a different page, so if the banner changes in the first page, it will automatically change in the second one.
I thought maybe some javascript could do the work, but I am not really sure how to get the image path from inside the div.
Any help will be appreciated, greetings from Argentina

solution using html5 and javascript is this
you can get the image tag through javascript(as u say it is in div
and whose id you know)
something like
src = document.getElementById("id").childnodes[0].src
should work for u
then you can store this src in the localStorage
localStorage["src"] = src;
as soon as you store something in localstorage it will fire a
"storage" event in all the other pages except the page in which
you have actually stored the src
so handle "storage" event in the other pages like this
window.addEventListener("storage",func,false);
function func(event)
{
src = localStorage[event.key];
//now src has the updated src :)
}

How to make videos on Youtube not cover a lightbox?

Edit: I thought I solved it but I didn't.
I have javascript that gathers elements on a webpage and puts them in a lightbox on top of the page. It works fine for your every day page but on Youtube the videos show through. I looked and found out about wmode = "transparent". So what I have tried is...
var youtubevideo = document.getElementsByTagName('link');
var len = youtubevideo.length;
for(var i=0;i<len;i++){
//youtubevideo[i].setAttribute('wmode', "transparent");
youtubevideo[i].href += "?wmode=transparent";
alert(youtubevideo[i].href);
}
The alert verifies I am doing nothing wrong as far as doing what I intend to do. You can also see where I have commented out the other way I tried it. Is there a way I didn't find to accomplish this?

I found out you need to make the video reload. You can do this by copying the src to another variable then change the src to "" and then change the src again to the variable you saved the original src in.