How to make video player using javascript?

There is json:
[{
 "id": "1",
 "title": "Big Buck Bunny",
 "description": "Big Buck wakes up in his rabbit hole, only to be pestered by three critters, Gimera, Frank and Rinky. When Gimera kills a butterfly, Buck decides on a payback Predator-style",
 "meta": {
 "releaseYear": "2008",
 "directors": [{
 "name": "Sacha Goedegebure"
}],
 "actors": []
},
 "images": {
 "cover": "cover-bigbuckbunny.png",
 "placeholder": "placeholder-bigbuckbunny-1080p.png"
},
 "streams": [{
 "type": "mp4",
 "url": "http://media.w3.org/2010/05/bunny/movie.mp4"
 }, {
 "type": "ogv",
 "url": "http://media.w3.org/2010/05/bunny/movie.ogv"
}]
}, {
 "id": "2",
 "title": "Sintel",
 "description": "The film follows a girl named Sintel who is searching for a baby dragon she calls Scales. A flashback reveals that Sintel found Scales with its wing injured and helped care for it, forming a close bond with it."
 "meta": {
 "releaseYear": "2010",
 "directors": [{
 "name": "Colin Levy"
}],
 "actors": [{
 "name": "Cas Jansen"
 }, {
 "name": "Tygo Gernandt"
}]
},
 "images": {
 "cover": "cover-sintel.png",
 "placeholder": "placeholder-sintel-1080p.png"
},
 "streams": [{
 "type": "mp4",
 "url": "http://media.w3.org/2010/05/sintel/trailer.mp4"
 }, {
 "type": "webm",
 "url": "http://media.w3.org/2010/05/sintel/trailer.webm"
 }, {
 "type": "ogv",
 "url": "http://media.w3.org/2010/05/sintel/trailer.ogv"
}]
}, {
 "id": "3",
 "title": "Elephant's Dream",
 "description": "Elephants Dream is the story of two strange characters exploring a capricious and seemingly infinite machine. The elder, Proog, acts as a tour-guide and protector, happily showing off the sights and dangers of the machine to his initially curious but increasingly skeptical protege Emo. As their journey unfolds we discover signs that the machine is not all Proog thinks it is, and his guiding takes on a more desperate aspect.",
 "meta": {
 "releaseYear": "2006",
 "directors": [{
 "name": "Bassam Kurdali"
}],
 "actors": [{
 "name": "Cas Jansen"
 }, {
 "name": "Tygo Gernandt"
}]
},
 "images": {
 "cover": "cover-elephantsdream.png",
 "placeholder": "placeholder-elephantsdream-1080p.png"
},
 "streams": [{
 "type": "webm",
 "url": "http://lachy.id.au/lib/media/elephantsdream/Elephants_Dream-360p-Stereo.webm"
}]
}, {
 "id": "4",
 "title": "Sita Sings the Blues",
 "description": "An animated version of the epic Indian tale of Ramayana set to the 1920s jazz vocals of Annette Hanshaw.",
 "meta": {
 "releaseYear": "2008",
 "directors": [{
 "name": "Nina Paley"
}],
 "actors": [{
 "name": "Annette Hanshaw"
 }, {
 "name": "Aseem Chhabra"
 }, {
 "name": "Bhavana Nagulapally"
}]
},
 "images": {
 "cover": "cover-sitasingstheblues.png",
 "placeholder": "placeholder-sitasingstheblues-1080p.png"
},
 "streams": [{
 "type": "webm",
 "url": "http://lachy.id.au/lib/media/sitasingstheblues/Sita_Sings_the_Blues-360p-Stereo.webm"
}]
}]


How to make a video out of this player? Namely interested in the question how to play video on the page? Something like this happened:
hjWejYrH.png

Ready players not to offer, want to learn to do so himself.
July 8th 19 at 11:24
2 answers
July 8th 19 at 11:26
videojs.com download, study the source code, study the source code, study the source code, trying to start writing
then understand that a Bicycle without wheels use a ready-made player - brandyn.Rogahn43 commented on July 8th 19 at 11:29
July 8th 19 at 11:28
In short:

Parse, deduce standard video tag, underneath typeset toolbar control with buttons.
<video poster>
 <source src type="video/ogg; codecs="theora, vorbis"">
 <source src type="video/webm; codecs="vp8, vorbis"">
 <source src type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
 <p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>

<ul class="controls">
the <li>
 <a href="#" class="prev"></a>
 <a href="#" class="play"></a>
 <a href="#" class="pause"></a>
 <a href="#" class="stop"></a>
 <a href="#" class="next"></a>
</li>
</ul>


Remove standard controls from the video

video.controls = false;

and hung on the buttons events.

var video = document.getElementsByTagName("video")[0];
var play = document.getElementsByClassName("play")[0];
var pause = document.getElementsByClassName("pause")[0];
var stop = document.getElementsByClassName("stop")[0];
var prev = document.getElementsByClassName("prev")[0];
var next = document.getElementsByClassName("next")[0];

function pause() {
video.pause();
}

function play() {
video.play();
}

...

play.addEventListener('click', play());
pause.addEventListener('click', pause());

...


Docks:
www.w3schools.com/tags/ref_av_dom.asp
https://developer.mozilla.org/en-US/docs/Web/Guide...

Example:
https://developer.mozilla.org/en-US/Apps/Fundament...

Find more questions by tags JavaScript