Видеоплеер как на Last.FM?

Question

[Finx]

Доброго времени суток.
Подскажите, как можно сделать такой же видеоплеер как на last.fm?


Если на сайте нажать значок проигрывания напротив любого трека - откроется плеер ютюба в правом, нижнем углу и начнется автовопроизведение.

Answer 1

[GreatRash]

1. Поискать в интернетах Youtube JS API
2. В БД привязать к песне хеш видоса с ютуба
3. При нажатии на кнопку "плей" получаем id песли, лезем в базу по айди, получаем хеш видоса, отдаём его яваскрипту и просим апи ютуба показать нужное видео у нас на сайте.

Comments

[Finx]

В этом случае не обязательно работать с БД, можно и напрямую с json объекта выдергивать ссылки на видео. Вопрос был в том, как сделать такой же плеер, что бы он всегда был прикреплен в правом нижнем углу и даже при прокрутке оставался там

[Евгений Кузовлев]

Finx: position: fixed; ?

[GreatRash]

Finx: Эмм... position: fixed; right: 0; bottom: 0;

Answer 2

[Vit]

https://developers.google.com/youtube/iframe_api_r...

А если вам особый контроль за проигрыванием не нужен, то добавляется просто на страницу iframe:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_EPrzxbpoFI?ecver=1" frameborder="0" allowfullscreen></iframe>

В src указываете ссылку на нужное видео на ютубе. Ну и стилями просто позиционируете этот iframe в правом нижнем углу, или где вам надо.

Comments

[Finx]

Это обычное встраивание. Если вы зайдете на сайт last.fm , то увидите, что у них видео просто крепится к правому нижнему углу и всегда находится там, даже при прокрутке

[Vit]

Finx: гуглите css position fixed

[Vit]

https://www.screencast.com/t/0iQt4V9i

[Finx]

Vit: Супер. А как сделать, что бы трек появлялся справа снизу при нажатии на кнопку?

Answer 3

[AdrianBlair]

Демонстрация