How to read all video type in a video tag

Question

I make a web interface for my server and I want to read all my video, but I have some problems:

When I change the innerHTML (in javascript) of my video tag with a new source tag, it keep playing the previous video then I need to refresh the page between each video, but if I write the video url in the src attribute of my video tag I don't have this problem, but can I place the type attribute of the source tag in the video tag ?
Answered

I have many mkv file, I have no problems about the video but the audio doesn't work, ac3 for most of them, I need to specify codecs in the type attribute, but how can I know what are codecs of a video file in php ?

.avi doesn't work, can I read them with the correct value in attribute type ? if yes what is this value ?

Then I think I need an advanced guide about the type attribute with all possible value, where can I found it ? all guide I found were not detailed enough.

Sorry for my english, if there is something you don't understand tell me and I will correct or explain it.
Thank you for your help.

EDIT :
I come just to discover the track tag then... ^^ how can I extract a .vtt file with subtitles from a .mkv in php ?

If u have an answer just to one of my questions or an early answer post it pls, I search on my side.

EDIT 2 :
Now I can change the source tag and it change the video, but I still need answers to other questions.

Answer 1

Please note that by far very few codecs are supported by browsers. You should have at least 2 versions of each video: ogg and mp4; if you can get webm as well, that'll be a bonus. mkv are not normally supported by any browser, especially ac3 encoding.

Now, provided you have the right format videos, if you simply change the innterHTML to specify a new video source, the currently playing video won't stop. You need to actually stop it first, set the new one, then start playing it. For example, if you have in your html:

<video id='video-player' controls></video>

Then you can use a javascript similar to this:

function playVideo(name) {
    var video = document.getElementById('video-player');
    if(!video.paused) {
        video.pause();
    }

    while(video.firstChild) {
        video.removeChild(video.firstChild);
    }

    var source = document.createElement('source');
    if(video.canPlayType('video/ogg')) {
        source.type = 'video/ogg';
        source.src = name + '.ogg';
    } else if(video.canPlayType('video/webm')) {
        source.type = 'video/webm';
        source.src = name + '.webm';
    } else if(video.canPlayType('video/mp4')) {
        source.type = 'video/mp4';
        source.src = name + '.mp4';
    }
    video.appendChild(source);

    video.load();
    video.currentTime = 0;
    video.play();
}

Note that I haven't tested this code, so you may need to make some adjustments for it to work.