We Keep Coding

Quality selection with 1 source file in HTML/JS [duplicate]

Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.

Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.

You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>

How to bypass fullscreen playing with html5 video tag in iphone?

I have a video in which I want to disable fullscreen playing with html5 video tag in iPhone,
I tried different solution as suggested in StackOverflow but none seemed to solve the problem.
Here is my solution by adding playisinline=1
<video id="orange-video-1" class="videotag active" preload="auto" playsinline=1 webkit-playsinline=1 src="emptyvideo/emptyvideo.mp4" muted>
</video>
what do I need to change to get what I want?

Actually you don't need to set it to equal one. playsinline should work.
Try this instead:
<video id="orange-video-1" class="videotag active" preload="auto" webkit-playsinline playsinline src="emptyvideo/emptyvideo.mp4" muted>
</video>
Doing it from a jQuery view would also work:
// Sets the attribute, empty second parameter needed
// otherwise it would be a getter func
$('video').attr('webkit-playsinline', '');
$('video').attr('playsinline', '');
// Set the webview on iOS
webview.allowsInlineMediaPlayback = true;
If that doesn't work:
Reading Apple's documentation it appears you would use the following code since playisinline=1 works if the website is stored on the home page. Try this in your config file:
<preference name="AllowInlineMediaPlayback" value="true" />

Javascript: Video starts with delay when started at certain position

I want to display a video on a page which starts at a certain position (e.g., 10 seconds). I have found a way to program this with the code below.
My problem is that it takes the browser several seconds to start the video. As far as I have read, the browser needs to load the duration of the video before it can play it at the certain position.
Is there some way to start the video immediately without any delay?
This is my code:
HTML
<video style="display:block; margin: 0 auto;" width="512" height="288" id="vid1" autoplay>
<source src="video.ogg" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>
Javascript
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 10 ;}, false)
I would be very thankful for every hint!
Thanks in advance!

I won't have enough have the reputation to comment so posting as an answer.
Have you tried to put ??
document.getElementById("vid1").load();
This load() method is used to load/update the video.

Audio Tracks JS Function Not Playing or Pausing Audio

I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.

Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE

How to properly convert my embedded audio and javascript to HTML5 audio?

At the moment I am using sounds on my website using an old technique with embedded tags and javascript . I want to convert these to HTML5, but I am unsuccessful doing this.
This is the code I have at the moment:
HTML:
<div class="au">
<embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
<embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">
</div>
JS:
//Sounds
function playSound(soundobj) {
if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds
var thissound=document.getElementById(soundobj);
thissound.Play();
}
}
JS used in other functions to trigger the sounds:
playSound('sound1');
playSound('sound2');
So all the above works. Now to convert this to HTML5. The HTML part is easy, I think it should look like this:
HTML5:
<!--HTML5 audio-->
<audio id="sound1" preload="auto">
<source src="audio/tileSelect.wav" type="audio/wav" />
</audio>
<audio id="sound2" preload="auto">
<source src="audio/tileRemove.wav" type="audio/wav" />
</audio>
But for the JS part I am kinda stuck. Anyone has an idea about this? Tried to change soundobj to soundid, but had no luck with that.
Many thanks,
Maurice

There are two issues with the code you have posted.
First one would be the markup that should probably read like this instead:
<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio>
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>
The <video>-like source notation that you used is not documented anywhere (although I have to admit that it does not feel wrong - but then again I have never used HTML5 audio yet), see MDN documentation
EDIT: Apparently it's ok to use source elements inside audio elements:
Permitted content: Transparent content, containing either a src
attribute or one or more elements, followed by either flow
content or phrasing content , with no or elements.
See: https://developer.mozilla.org/en/HTML/Element/audio
Still you don't really need it in your case as you just have one source file.
Second issue would be that you are using a non-existent method of .Play() (capital P), that should be called .play(). So your JS should look like:
function playSound(soundobj) {
if (document.getElementById('sound').checked){
document.getElementById(soundobj).play();
}
}
playSound('sound2'); //should play 'audio/tileRemove.wav'