Not able to dynamically change source of the HTML5 Video with Javascript - javascript

Been trying to change the source video of an HTML5 video (after clicking a button). However I run into errors. Code and errors below:
Relevant HTML:
<video id="video2" playsinline controls muted preload="auto" style="z-index: -1; position: absolute;">
<source src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
</video>
(regarding the z-index stuff - this video plays then is grabbed by a canvas which re-draws it, as part of the overall application. Probably not relevant but figured I'd mention it.)
Relevant Javascript. Initiates the video, plays it fine. It's a little esoteric because I started from someone else's sample.
loadCompanionVideo();
export async function loadCompanionVideo() {
setStatusText('Setting up companion video...');
try {
video2 = await loadVideo2();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(video player) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
video2.width = videoWidth2; // some external numbers
video2.height = videoHeight2; // just to customize width and height; works fine
return video2;
}
So this is fine, my first video exercise_media/vid_exercise_sample_1.mp4 plays just fine. However, I want to change the video source to exercise_media/vid_exercise_sample_2.mp4, same format, located in same folder, etc. (I made sure this video is fine by hard-coding it into the HTML above, and it also plays just fine.)
Here's what I've been trying for changing it:
function buttonFunctionChangeVideoSrc() {
document.getElementById("video2").pause();
//document.getElementById("#video2 > source").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").src = "exercise_media/vid_exercise_sample_2.mp4";
document.getElementById("video2").load();
document.getElementById("video2").play();
}
To no avail, neither ("#video2 > source").src nor ("video2").src work. In the first case, the error is:
Uncaught TypeError: Cannot set property 'src' of null
at HTMLButtonElement
The video pauses and stays frozen.
In the second case, trying video2.src directly (same as document.getElementById("video2")), the error is
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
The video portion of the screen goes white/blank.
Play/pause functionality works fine, so I know I have a valid reference to my video2 object. But I cannot seem to change the source. And I also know that the other source video works just fine, as I can hard-code it into the HTML and play it without issue. But I cannot seem to dynamically switch between them.
Any help is much appreciated.
Adding more of my code to take a look at. Don't worry about the pose stuff, it's for my application to analyze the videos, and works fine when I just have one video side by side the webcam (that's what my application does).
The problem is that I cannot change the video2 source to a different MP4. In fact the only way I can have it play an MP4 at all is if I explicitly set it in the HTML.
HTML:
<div id="canvases" class="canvas-container">
<div id='main' style='display:none'>
<video id="video" playsinline style=" -moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
display: none;
">
</video>
<canvas id="output" class="camera-canvas"></canvas>
<canvas id="keypoints" class="camera-canvas"></canvas>
<video id="video2" playsinline controls muted style="z-index: -1; position: absolute;"
>
<source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" >
<!-- hard-coding the src in source is the ONLY way I can play a video here at all... -->
</video>
<canvas id="output2" class="camera-canvas2"></canvas>
<canvas id="keypoints2" class="camera-canvas2"></canvas>
<canvas class="illustration-canvas"></cavnas>
<canvas class="illustration-canvas2"></cavnas>
</div>
Javascript:
export async function bindPage() {
setupCanvas();
setupCanvas2();
buttonSetup();
toggleLoadingUI(true);
setStatusText('Loading AI models...');
posenet = await posenet_module.load({
architecture: defaultPoseNetArchitecture,
outputStride: defaultStride,
inputResolution: defaultInputResolution,
multiplier: defaultMultiplier,
quantBytes: defaultQuantBytes
});
setStatusText('Loading FaceMesh model...');
facemesh = await facemesh_module.load();
facemesh2 = await facemesh_module.load();
setStatusText('Loading Avatar file...');
let t0 = new Date();
await parseSVG(Object.values(avatarSvgs)[0]);
setStatusText('Setting up camera...');
try {
video = await loadVideo();
} catch (e) {
let info = document.getElementById('info');
info.textContent = '(web cam) this device type is not supported yet, ' +
'or this browser does not support video capture: ' + e.toString();
info.style.display = 'block';
throw e;
}
try {
video2 = await loadVideo2();
} catch (e) {
console.log("Error loading companion video :: "+e);
}
console.log(video2); // shows the full html
playpauseFunction(); // start video2
toggleLoadingUI(false);
detectPoseInRealTime(video, posenet); //actual application, works fine
}
async function loadVideo2() {
const video2 = await setupVideo2();
return video2;
}
async function setupVideo2() {
const video2 = document.getElementById('video2');
//video2.setAttribute("src", vid_url_1); //does not work
//document.getElementById("source2").src = vid_url_2; // does nothing
videoWidth2orig = video2.videoWidth;
videoHeight2orig = video2.videoHeight; // gives the actual e.g. 640 x 360
//.. I do some stuff below to set video2 width/height, works fine
return video2;
}
function playpauseFunction() {
try {
if (playpause == true) {
video2.pause();
playpause = false;
//alert("Workout paused. Click Play/Pause to resume.");
} else if (playpause == false) {
video2.play();
playpause = true;
}
} catch (e) {
console.log("playpauseFunction exception :: "+e);
}
}
Now, like I said, if I hard-code into HTML the src of <source> tag, i.e. <source id="source2" src="exercise_media/vid_exercise_sample_1.mp4" type="video/mp4" > the application runs fine and looks like the following:
(Works fine, the webcam plays in real-time next to the video, and I have my skeletal tracking running on the rightside video as it plays.)
What I want to do is click on e.g. "Exercise Sample 2" and change the rightside video, obviously. Nothing I've tried has worked, such as:
function setupExercise2() {
video2.setAttribute('autoplay', 'true');
document.getElementById("source2").src = "exercise_media/vid_exercise_sample_2.mp4";
//video2.setAttribute("src", "exercise_media/vid_exercise_sample_2.mp4"); // have tried both, neither work
video2.load();
const playPromise = video2.play() // trigger video load
console.log(playPromise);
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}
}
Specifically for the first line (uncommented), the console says:
Promise {<pending>}__proto__: Promise[[PromiseState]]: "pending"[[PromiseResult]]: undefined
The right side video turns white and nothing plays. If I try instead with video2.setAttribute line uncommented, then the console logs:
Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: DOMException: Failed to load because no supported source was found.
code: 9
message: "Failed to load because no supported source was found."
name: "NotSupportedError"
__proto__: DOMException
To be clear, I can hard-code in any of the vid_exercise_sample_{2,3,..}.mp4 into the html and they play and run just fine, so I don't believe that's the issue.
Hopefully I've provided a pretty full picture now!

The following example code shows a video .src being updated dynamically.
There are two buttons used to switch between the different sources.
It has been tested on Windows PC using Chrome, Edge and Firefox browsers.
<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>
<body>
<video id="video2" width="600" height="480" controls style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 10px">
<source type="video/mp4">
</video>
<canvas id="myCanvas" width="600" height="480" style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 640px">
</canvas>
<div style="z-index: 1; overflow:hidden; position: absolute; top: 510px; left: 10px">
<button onclick="ChangeVideoSrc( 1 )">Play Video 1</button>
<button onclick="ChangeVideoSrc( 2 )">Play Video 2</button>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var timer_DrawCanvas; //# updated later in code
//# Example video links that work on my testing...
vid_url_1 = "https://seed191.bitchute.com/pupNZR0eMW9M/4CU38o2lkgyj.mp4";
vid_url_2 = "https://seed171.bitchute.com/VBdNMrOHylJh/2BMyQPl6BSpZ.mp4";
//# Try your own links if the above works...
//vid_url_1 = "exercise_media/vid_exercise_sample_1.mp4"
//vid_url_2 = "exercise_media/vid_exercise_sample_2.mp4"
//# Set initial starting vid SRC (used on page load)
const myVid = document.getElementById("video2");
myVid.setAttribute("src", vid_url_1);
//# Setup event listeners
myVid.addEventListener("canplay", handle_Media_Events);
myVid.addEventListener("loadeddata", handle_Media_Events);
myVid.addEventListener("play", handle_Media_Events);
myVid.addEventListener("pause", handle_Media_Events);
myVid.addEventListener("ended", handle_Media_Events);
function drawVideo()
{
ctx.drawImage(myVid, 0, 0, 600, 480);
}
function ChangeVideoSrc( vidNum )
{
myVid.src = window[ "vid_url_" + vidNum ];
myVid.load();
}
function handle_Media_Events()
{
//# if enough data to begin playback
if ( event.type == "canplay" ) { myVid.play(); }
//# if first frame is available
if ( event.type == "loadeddata" )
{ ctx.drawImage( myVid, 0, 0, 600, 480 ); } //# draws re-sized
if ( event.type == "play" )
{ timer_DrawCanvas = setInterval( drawVideo, 30 ); }
if ( (event.type == "pause") || (event.type == "ended") )
{ clearInterval( timer_DrawCanvas ); }
}
</script>
</body>
</html>
Hopefully this will give you a reference point towards achieving the quest of "dynamically change source of the HTML5 Video with Javascript". The quest continues...
Ask anything when you've had chance to test the code.

Just tried out a quick snippet and it works without a bother.. So weird..
what I used
const v = document.getElementById("vid");
const s = document.getElementById("src");
function changeVideo() {
s.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
v.load();
v.play();
console.log(s,v);
}
document.getElementById("change").onclick=changeVideo;
<video id="vid" controls autoplay style="width:75%">
<source id="src" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video><br/><br/>
<button id="change">Change the video</button>
must be missing something. I'd be able to say for sure if I saw a live example, but that's completely up to you.
Otherwise found this on W3
'Warning: Don't make your function asynchronous with the async keyword. You'll lose the "user gesture token" required to allow your video to play later.'

You're trying to change the source of the <video> element, not the <source> element..
For a quick solution just add an 'id' to that element and change the 'src' property accordingly.
<source id="video2source" src="yoursource.vid">
JS
document.getElementById('video2source').src = 'newsource.vid';
Keep in mind, a good practice is to store DOM references in variables. Makes it easier for the browser if you don't perform JS DOM reads all the time.
const vid2src = document.getElementById('video2source'); // define variable in the global scope
vid2src.src = 'newsource.vid'; // use the reference everywhere else
Hope this helps! =)
Edit..
Question with a similar problem:
changing source on html5 video tag
Edit numero dos...
Because the play() method is asynchronous, lets try an async solution. =)
const video = document.getElementById("video2");
video.setAttribute('autoplay', 'true'); // just in case
/// ... your previous code ... switch source, and so on and so on
const playPromise = video.play() // trigger video load
console.log(playPromise); // just check what the console tells you
if ( playPromise !== undefined ) {
playPromise.then(() => {
// video should start playing as soon as it buffers enough
}).catch(error => {
// playback failed, log error
console.log(error);
})
}

When async is great and all, using it everywhere is not the best idea.. And some methods(like load() and play() are already asynchronous).
In this fiddle:
https://jsfiddle.net/azdpu3Ly/13/
I used a timer to trigger the change of video source through your setupVideo2 function. But as soon as I add await to the function call, it stops working.
So make sure to NOT call your functions related to the video with an await or follow it with .then(). Synchronous code will work just fine and you won't gain anything with the former..

Related

Is it possible to embed actions in html5 video?

Is there any way to play a video in html5, stop and execute javascript at known points within the video?
Yes, try this. You have to use the currentTime property. Start with that and start your javascript functions from there. Is that what you're looking for?
var vid = document.getElementById("video");
//Add a timeupdate listener
video.addEventListener("timeupdate", function(){
//Check for video properties from within the function
if (this.currentTime == 5)
this.pause();
//cal javascript
}
}
Looking at the accepted answer over here it looks like it is possible.
To pause the video you just do this:
var mediaElement = document.getElementById("video"); // create a reference to your HTML5 video
mediaElement.pause(); // pauses the video
If you want to play the video, do this:
mediaElement.play(); // plays the video
To get the current time in the video, do this:
mediaElement.currentTime; // gets the current time
Here's an example linking them all up:
var mediaElement = document.getElementById("video");
if(mediaElement.currentTime == 35){
mediaElement.pause();
// do whatever else you would like
mediaElement.play();
}
The MDL documentation is here, there are plenty of other properties you might find helpful.
Hope this helps!
Yes, by doing like this you can.
Note that you have to look for a time using bigger than > bigger than (as the chance to match an exact millisecond is almost zero), and have a variable in one way or the other to know which ones is done.
window.addEventListener('load', function() {
var cur = document.querySelector('#cur'),
vid = document.querySelector('#vid')
})
var appDone = {"done7":false,"done4":false}
vid.addEventListener('timeupdate', function(e) {
if (e.target.currentTime > 7 && !appDone.done7) {
appDone.done7 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done7 once";
e.target.play();
}
if (e.target.currentTime > 4 && !appDone.done4) {
appDone.done4 = true;
e.target.pause();
//do something
cur.textContent += ", " + "done4 once";
e.target.play();
}
})
<video id="vid" width="320" height="176" controls>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p id="cur"></p>

Stepping through a video file with reveal.js

Problem and question
In a reveal.js presentation, I want to include a long video file. I want to have the playblack stop at certain positions, so that I have time to explain to the audience what they’re seeing. Then, I want to have the playback continue when I click. How can I do this?
Unsuccessful attempts so far
My attempts are as follows. I split the video file into parts 1.webm, 2.webm, 3.webm and so on, such that each part ends where I want to have a break. My idea then is to
Override the keydown event of Reveal.js so that it doesn’t go to the next slide, but instead executes my Javascript. How can I do something like this?
<div class="slides">
<section class="video-stepper">
<video>
<source data-src="1.webm" type="video/webm" />
</video>
</section>
</div>
<script>
$(function() {
// How can I do this?
Reveal.addEventListener('click', function(event) {
if ($(event.currentSlide).hasClass('video-stepper')) {
event.preventDefault();
// change 'src' of the video element and start the playback.
}
});
});
</script>
Use fragments and autoplay the video when it is shown:
<div class="slides">
<section class="video-stepper">
<video class="fragment current-visible video-step">
<source data-src="1.webm" type="video/webm" />
</video>
<video class="fragment current-visible video-step">
<source data-src="2.webm" type="video/webm" />
</video>
<video class="fragment current-visible video-step">
<source data-src="3.webm" type="video/webm" />
</video>
</section>
</div>
<script>
$(function() {
Reveal.addEventListener('fragmentshown', function(event) {
if ($(event.fragment).hasClass('video-step')) {
event.fragment.play();
}
});
});
</script>
And some CSS taken from the question Hide reveal.js fragments after their appearance, so that the fragments stack on top of each other:
.fragment.current-visible.visible:not(.current-fragment) {
display: none;
height:0px;
line-height: 0px;
font-size: 0px;
}
However, this comes with some fading in and out, which looks bad. How can I avoid the fading?
When entering the video slide, you can basically disable reveal.js by calling Reveal.disableEventListeners(), then bind your own logic to the keydown event until you’ve stepped through all videos, before enabling reveal.js again with Reveal.addEventListeners().
Some additional effort is required to avoid flickering when transitioning to the next video. You can add a new <video> element with the new video, place it on top of the current <video> with the help of CSS z-index, play the new video, then remove the old.
HTML
<section class="video-stepper">
<!-- Unlike the other <video> element, this one is not absolutely
positioned. We hide it with CSS, but use it to reserve space
on the slide and compute the optimal width and height. -->
<video class="placeholder stretch">
<source src="1.webm">
</video>
<video class="video-step" data-sources='["1.webm","2.webm","3.webm"]'></video>
</section>
CSS
.video-stepper {
position: relative;
}
video.video-step {
position: absolute;
top: 0;
left: 0;
}
video.video-step.front {
z-index: 10;
}
video.placeholder {
visibility: hidden;
}
Javascript
This is a bit lengthy, but works as desired.
Reveal.addEventListener('slidechanged', function(event) {
if ($(event.currentSlide).hasClass('video-stepper')) {
// When we enter a slide with a step-by-step video, we stop reveal.js
// from doing anything. Below, we define our own keystroke handler.
Reveal.removeEventListeners();
// Set the width and height of the video so that it fills the slide.
var stretcher = $(event.currentSlide).find('video.placeholder').get(0);
var video = $(event.currentSlide).find('video.video-step').get(0);
video.setAttribute('width', stretcher.getAttribute('width'));
video.setAttribute('height', stretcher.getAttribute('height'));
// Convert the data-sources attribute to an array of strings. We will
// iterate through the array with current_video_index.
var sources = JSON.parse(video.getAttribute('data-sources'));
var current_video_index = 0;
// Add a <source> element to the video and set the 'src' to
// the first video.
var source = document.createElement('source');
source.setAttribute('src', sources[0]);
video.appendChild(source);
document.addEventListener('keydown', function step_through_videos(event) {
if (event.which == 39) {
// right arrow key: show next video
// For the next video, create a new <video> element
// and place it on top of the old <video> element.
// Then load and play the new. This avoids flickering.
var new_video = $(video).clone().get(0);
var new_video_source = $(new_video).children('source').get(0);
new_video_source.src = sources[current_video_index];
new_video.load();
$(new_video).addClass('front video-step');
$(new_video).insertAfter(video);
new_video.play();
// Wait a little before removing the old video.
new Promise((resolve) => setTimeout(resolve, 500)).then(function() {
video.remove();
video = new_video;
$(video).removeClass('front');
});
current_video_index = current_video_index + 1;
event.preventDefault();
} else if (event.which == 37) {
// left arrow key: return the counter to previous video
current_video_index = current_video_index - 1;
event.preventDefault();
}
if (0 > current_video_index || current_video_index >= sources.length) {
// Reinstall reveal.js handlers.
document.removeEventListener('keydown', step_through_videos, true);
Reveal.addEventListeners();
console.log('Added reveal.js event listeners.');
}
}, true);
}
});

Dynamically loaded video source is aborted in IE

I have a script that loads the sources for a video that works great in Chrome, FF and Safari. In IE however, the source is "Aborted" in the networks tab. Here is my code:
<div id="video_wrapper">
<video muted controls="false" autoplay poster="/videos/home.jpg" preload="none" loop id="bg_video">
<img src="/videos/home.jpg" alt="Your browser does not support HTML5 video.">
</video>
documentObj.on('ready', function() {
insertVideo();
});
function insertVideo() {
if (windowObj.width() > 767) {
setTimeout(function() {
var video = $("video")[0];
insertSource("/videos/home.webm", 'video/webm');
insertSource("/videos/home.mp4", "video/mp4");
video.play();
}, 50);
} else {
$("video").remove();
}
}
function insertSource(src, type) {
var source = document.createElement('source');
source.src = src;
source.type = type;
$("#bg_video").prepend(source);
}
Anyone have any advice on this? I can't seem to figure this mess out.
Thanks everyone!
I ended up adding an event listener for "canplay" on the video element. Once its loaded, i ran video.play() and everything seems to be working fine.
Thanks everyone!

Request Full Screen HTML5 Video onPlay

I'm using the following code to trigger fullscreen when a user clicks on the play button on a <video> element:
var video = $("#video");
video.on('play', function(e){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});
But nothing happens when I click the play button.
Any idea's why?
EDIT: Here's my HTML code:
<video width="458" height="258" controls id='video' >
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>
There are a couple things going on here:
First, in your code, video is a jQuery object, not the actual video element. For a jQuery object, you can reference it like this:
var actualVideo = video[0]; // (assuming '#video' actually exists)
Second, for security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule.
So an alternative solution would be to request fullscreen in a click event, like this:
var video = $("#video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
Ideally, you'd probably want to build out a more complete player ui, but this should give you the general idea.
A less verbose way to toggle full screen combining answers from this and other questions.
This should handle all browser flavours: chromium- and webkit-based, firefox, opera, and MS-based browsers.
var p = document.querySelector('#videoplayer');
if (!window.isFs) {
window.isFs = true;
var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
fn_enter.call(p);
} else {
window.isFs = false;
var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
fn_exit.call(p);
}
p represents the DOM object of the video element, and window.isFs is just a random variable for storing the current fullscreen state.
If your player is a jQuery object then you can get the underlying DOM-element with var p = player.get(0).

Adding audio to click event

I want to add a sound clip to a button on a game I am creating. Currently It doesn't do anything and I don't know why.
At the moment In the script I have...
var audio = $(".mysoundclip")[0];
$(".minibutton").onclick(function() {
audio.play();
});
In the HTML I have...
<audio id="mysoundclip" preload="auto">
<source src="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"></source>
</audio>
Then I have CSS for .minibutton.
Any ideas why it won't work?
Your jQuery had some simple errors in it.
HTML
<audio id="mysoundclip" preload="auto">
<source src="http://www.wav-sounds.com/cartoon/bugsbunny1.wav"></source>
</audio>
<button type="button">play</button>
jQuery
var audio = $("#mysoundclip")[0];
$("button").click(function() {
audio.play();
});​
Fiddle: http://jsfiddle.net/iambriansreed/VavyK/
​
Maybe I'm a too suspicous.. but
http://www.sound-effect.com/sounds1/animal/Saf/Tiger1.wav "The requested URL was not found on this server"
If that's just a typo, you should also try to figure out which audio types a browser is capable to play:
myApp.htmlAudio = (function _htmlAudioCheck() {
var elem = document.createElement('audio'),
bool = false;
try {
if( !!elem.canPlayType ) {
bool = new Boolean(bool);
bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"');
bool.mp3 = elem.canPlayType('audio/mpeg;');
bool.wav = elem.canPlayType('audio/wav; codecs="1"');
bool.m4a = ( elem.canPlayType('audio/x-m4a;') || elem.canPlayType('audio/aac;'));
}
} catch(e) { }
return bool;
}());
Now we can check like
if( myApp.htmlAudio && myApp.htmlAudio.wav ) {
}
if the browser is able to playback .wav files for instance.
However, I never saw a nested source element for audio elements. That should be named track if anything. But you don't really need that here, you can just have a src attribute on the audio element itself. Example: http://jsfiddle.net/5GUPg/1/

Categories