We Keep Coding

How to get src attribute inside source element that is inside a video element?

I want to retrieve the src attribute from a source element that is also inside a video element.
<video controls>
<source src="img/Film/vid.mp4" type="video/mp4" />
<source src="img/Film/vid.mp4" type="video/ogg" />
Your browser does not support HTML video.
</video>

You can select each source element in the video with querySelectorAll and map through the list to extract the src property:
const sources = [...video.querySelectorAll('source')].map(e => e.src)
console.log(sources)
<video controls id="video">
<source src="img/Film/vid.mp4" type="video/mp4" />
<source src="img/Film/vid.mp4" type="video/ogg" />
Your browser does not support HTML video.
</video>

How do I play a audio file that is imported with accept?

Foe example I have this code
<input type="file" id="thefile1" accept="audio/*" />
I want to play this audio by using javascript. How can I do?

You can do this in one of two ways. Since you asked for JavaScript, you just want so set autoplay to true. The second way would be to do the same but set autoplay="true" on the video element itself.
In your case, if you don't want autoplay, you just need to run .play() on your video element.
Just to Play the Video
document.getElementById('playButton').addEventListener('click', (e) => {
const video = document.getElementsByTagName('video')[0];
video.play();
});
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
Autoplay options
JavaScript Option
const video = document.getElementsByTagName('video')[0];
video.autoplay = true;
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Option
<video width="320" height="240" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

How can I place several audio tracks in an HTML5 video?

I would like to know if it is possible to have a video in mp4 without audio, and tracks in mp3, or is there any way to change the language in an mp4 with several audios?
Something like that.
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
<audio src="/test/audio.mp3" srclang="es" label="Español">
<audio src="/test/audio1.mp3" srclang="en" label="Ingles">
<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
<track src="subtitulos1.vtt" kind="subtitles" srclang="en" label="Ingles">
</video>

Add stream subtitle in html5 video

I try add subttitle in video html5 with videosub.js
http://www.storiesinflight.com/js_videosub/
It work with file in same folder but not work with url stream !
Subttitle not word with this code
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="http://phim.dinhvanvu.com/wp-content/uploads/2015/07/Demo.srt" default></track>
</video>
But it work with
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="sub/je2.srt" default></track>
</video>

<video id="my_video" height="100%" width="100%" crossorigin="anonymous"></video>
This is because CORS limitation.
Use crossorigin="anonymous" in video tag.
if the above code didn't work, then there is no way to load the subtitle from that server.
Hope it will works for you. :)

HTML5 video.js Player error with subtitles

I am trying to write a basic video player using html5 video tag. I used Video.js as my JavaScript. I want to play a video with its caption.
Here is the code:
<!DOCTYPE html>
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<script>
videojs.options.flash.swf = "path/to/video-js.swf"
</script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
<source src="m.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
<track src="m.srt" kind="subtitles" srclang="en" label="English" default>
<track src="m.vtt" kind="subtitles" srclang="en" label="English" >
<track src="m.srt" kind="captions" srclang="en" label="English" >
<track src="m.vtt" kind="captions" srclang="en" label="English" >
</video>
When I open this file in my browser, I see a "cc" label that must enable/disable captions; but it doesn't work at all. VLC media palyer can play the video and caption well; so there is no error in source files.
Can any body help me?