Rules for html5 audio / video tags questioned

@PeterPan_321

Copy linkTweet thisAlerts:

Feb 26.2015

Recently I began to overhaul some of my pages that formerly relied on some flash players for audio and video to make use of html5. My flash player(s) rely on javascript calls that basically replace the contents of a ‘div’ element with a certain ‘id’, and I wanted to keep that as my ‘fallback to flash’ methodology. This meant detecting whether or not the browser supported video or audio, which seemed easy enough, but it was not. And while I did find an approach that worked, I still don’t know why my first method failed and I’d really like to. Consider this html5 audio tag structure…

[CODE]<div id=”musicDiv” align=”center” >

<audio controls autoplay >

<source src=”songSample.mp3″ type=’audio/mpeg; codecs=”mp3″‘>
<source src=”songSample.ogg” type=’audio/ogg; codecs=”vorbis”‘>

<div id=”testHtml5″>
<em>your browser doesn’t support<br>HTML5 audio </em>
</div>

</audio>[/CODE]

Seems pretty standard right? It worked as expected and The “browser doesn’t support” message only shows up in older browsers like IE-8. So next, I placed this javascript in the page..

[CODE]<script language=”JavaScript”>

if (document.getElementById(“testHtml5”) != null)
playUsingFlashPlayer(“songSample.mp3”, musicDiv);
</script>[/CODE]

Now just assume that my playUsingFlashPlayer() call does what its name suggests. Indeed, when I tested this on older browsers, the call would be triggered and the flash player would take over the ‘div’ tag whose id=”musicDiv”, and all worked as planned. But then I tried it on my other browsers like Firefox and Chrome, and now they too attempted to run the flash player.

OK, I did find a workaround which I’ll get to in a minute. For now, I want to understand WHY this failed. I understood that the rules of an html5 ‘audio’ tag said that html included within the tags would only be seen by browsers that didn’t support them. But if that were true, then the ‘div’ with id=”testHtml5″ should NOT have been seen, the getElementById() should have failed, and my flash player call should not have been triggered. WHY DIDN’T IT WORK THAT WAY!!

Incidentally, my workaround is temporary and incomplete, but for now works. I basically replace the javascript call with this…

[CODE]<script language=”JavaScript”>

// helper to decide whether flash is needed
var test_audio= document.createElement(“audio”) //try and create sample audio element
var test_video= document.createElement(“video”) //try and create sample video element
var mediasupport={audio: (test_audio.play)? true : false, video: (test_video.play)? true : false}

if (!mediasupport.audio)
playUsingFlashPlayer(“mp3/cd/DebsMoveSample.mp3”, “yes”);

</script>
[/CODE]

I don’t really like this because first, it really is only determining whether html5 audio is possible, not whether it actually worked, and second, I’m sure somebody’s old browser will confuse the visitor about a javascript “object not found ” error or something. It would be WAY better if the ‘audio’ tag worked the way all the tutorials SAY it will work, and apparently that’s not the case. Anyone know why?

Also in #HTML _↴