I have found several sites on Google about this problem and also found a few questions on here, which were apparently answered, but as I've been working on this for the last one or two weeks and just can't seem to get it to work at all, I wanted to revisit this.
I'm working on a demo that uses several video tags (vd1-3) which are then used in several canvas tags (cv1-3).
<video id="vd1" width="480" preload>
<source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
<source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>
<canvas id="cv1" width="160" height="270"></canvas>
I got a working version that uses one video. Now I would like to be able to dynamically change the clips that are playing in my video tags and subsequently in the canvas tags. Changing only one source worked, as far as I remember that was just "vd1.src = '...'", but I want to have at least two video files in there.
Now as you can see here, I tried using id's for the sources (as was suggested in an answered question here on stackoverflow), but I wasn't able to make that work.
We were able to get all the sources with this little bit of code here:
var x = document.getElementById("vd1");
var items = x.getElementsByTagName("source");
for(var i= 0; i < items.length; i++){
alert(items[i].getAttribute('src'));
}
}, false);
But I also failed to use it in order to change my sources. I thought I might be able to use "items[i].src = ..." or use setAttribute, but I can't get anything to work.
I'm still fairly new to all this, so I'm possibly missing something very simple... so if anyone has an idea and could point me into a direction, I would really appreciate it.
Update:
Eventually we came up with this solution which is pretty simple and straightforward
var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;
I think you're overcomplicating things - there's no need to update multiple sources as any given browser is only ever going to be playing one of your videos. If you're loading new sources with JavaScript you can simply query the currentSrc property of vd1, determine which of the videos is playing and load the new video in that format. At that point I'd simply remove all the source elements and set video.src to the new value.
Related
My iframe:
<iframe frameborder="0" width="100%" height="100%" src="https://csfe-preprod.bankid.no/CentralServerFEJS/a?cid=KF3c3j2c6XcWLdRN" title="BankID"></iframe>
Inside it is the element i want to interact with.
The problem is that with every tutorial/post on google/a couple on stackoverflow i've found, i just get the "element not found by selector" error every time.
Some i've tried: (i've tried multiple but i've erased them)
var driver = browser.driver;
var loc = by.css('iframe[title="BankID"]');
var el = driver.findElement(loc);
browser.switchTo().frame(el);
browser.switchTo().frame(element(by.xpath('//*[#id="bankid-container"]/iframe')).getWebElement());
I can't seem to understand why i can't interact with the elements. In the browser's console i can easly indentify them with a simple jquery css selector $('iframe[title="BankID"]') and multiple others, they work, i know they do but i can't seem to be able to interact with them.
I've tried I think all the possible ways of changing the frame, i'm really at my edge here...
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);
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.
I have an embedded flash video player on html page,
something like this:
<embed id="flash-videojs-31-field-mech"
name="flash-videojs-31-field-mech"
src="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
width="320"
height="240"
type="application/x-shockwave-flash"
allowscriptaccess='always'
allowfullscreen='true'
flashvars="config={'playlist': [ {'url': 'http://example.com/president.mp4', 'autoPlay':true, 'autoBuffering':true} ]}"
/>
Now I need to add an auto repeat functionality. I found this solution: http://flowplayer.org/forum/3/20130
Unfortunately, it involves passing function objects around and I have difficulties inserting it into flashvars attribute.
I can't take it as is, cause html snippet is actually generated by third party code and I want to keep number of tweaks minimal.
If you're using flowplayer, then you possibly can modify it after the embed is done.
Try using their API and doing something like:
$f().onFinish(function() {
this.stop();
this.play();
});
This should enable autorepeat for all players on your page. You may also use filter to select the players you need.
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';