Как сделать video player на javascript?

Question

[mishajs]

Есть 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"
    }]
}]

Как сделать видео плеер из этого? А именно интересует вопрос как проиграть видео на странице? Чтобы что-то типа такого получилось:


Готовые плееры не предлагать, хочу именно научиться делать так сам.

Answer 1

[Сергей Зеленский]

videojs.com качаем, изучаем исходники, изучаем исходники, изучаем исходники, пытаемся начать писать

Comments

[Сергей Зеленский]

потом понимаем что велосипед без колес используем готовый плеер

Answer 2

[Кирилл Ушаков]

Вкратце:

Парсишь, выводишь стандартный video-тег, под ним верстаешь панельку управления с кнопками.

<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">
	<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>

Убираешь стандартные контролы у видео

video.controls = false;

и вешаешь на кнопки нужные эвенты.

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());

...

Доки:
www.w3schools.com/tags/ref_av_dom.asp
https://developer.mozilla.org/en-US/docs/Web/Guide...

Пример:
https://developer.mozilla.org/en-US/Apps/Fundament...