html5 media tag change with change of media type in playlist

Question

I am having a requirement of creating a playlist of selected media(both audio and video) from local machine using HTML5 media tags. I am using the below code

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

Now the problem am facing is in this line
extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';

it only plays audio files if i change it to video/mp4 it plays video files only if i use if else then also the first condition is working

                if(audio.canPlayType('video/mp4')) {
                extension = '.mp4';
                }
                else if
                (audio.canPlayType('audio/mpeg')) {
            extension = '.mp3';
            }

Please help me out what could be the condition I can put here to play both type of media in playlist and also if possible I can switch video/audio tag with the type of media selected.

THANKS IN ADVANCE

Answer 1

To use both video and audio in a playlist you should use the html5 video tag instead of the audio tag. You do not need to switch back and forth. The video tag will play both audio and video files.

In order to use the code from the site listed, you will need to know whether you are loading a video or an audio file. Then you can determine the correct extension to use based on browser support found in the script. See the new html5 video and audio playlist example below:

http://jonhall.info/examples/html5_video_audio_playlist_example.html

In the new example I replaced the code:

extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';

with a function:

getExtension = function(type) {
    extension = '';
    if(type === 'a') {
        if(video.canPlayType('audio/mpeg')) {
            extension = '.mp3';
        }
        if(video.canPlayType('audio/ogg')) {
            extension = '.ogg';
        }
    }
    if(type === 'v') {
        if(video.canPlayType('video/mp4')) {
            extension = '.mp4';
        }
        if(video.canPlayType('video/ogg')) {
            extension = '.ogv';
        }
    }
    return extension;
};

Pass the letter 'a' for audio or the letter 'v' for video.