Как при нажатии кнопки play тега video(HTML5) сделать fullscreen?

Question

[Александр]

Как к кнопке плей базового контрола html5 video прикрутить событие fullscreen?
Это не подходит, так как там куда ни тыкни (даже на звук срабатывает) полный экран.
stackoverflow.com/questions/6039909/html5-full-scr...

Пробовал эвентом, не срабатывает requestFullscreen(); хотя console.log(); работает.

var video = $(".vidclass");
   $(video).on('play', function (e) {
        var vid = video[0].id;
        if (vid.requestFullscreen) {
            vid.requestFullscreen();
       } else if (vid.mozRequestFullScreen) {
            vid.mozRequestFullScreen();
        } else if (vid.webkitRequestFullscreen) {
            vid.webkitRequestFullscreen();
       }
        console.log(vid);
    });

Comments

[Александр]

var vid = video[0].id;
Это осталось от последних экспериментов.
пробовал абсолютно по разному.
var vid = video[0];
var vid = this;
var vid = e;
var vid = e.currentTarget;
var vid = e.currentTarget[0];

Answer 1

[Николай Васильчук]

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

Самый простой вариант - сделать свою кнопку "play" и ловить клик по ней.
jsfiddle.net/Anonym/25FaZ/1

Comments

[Александр]

Я так полагаю это сделано из за безопасности?
Не хотелось пилить свои контролы, вполне устраивают базовые но походу придётся.

[Николай Васильчук]

@s2nner да, это политика безопасности браузеоов. Иначе никак.

Answer 2

[Алексей Кулаков]

может быть стоит пытаться сделать фулскрином тот объект, который задан в параметре хендлера то бишь e?