Firefox 3.6 полноэкранное управление видео

Question

Firefox теперь поддерживает полноэкранный режим для тега video html5. (щелкните правой кнопкой мыши по фильму ..)

Есть ли способ создать элемент управления (тег html), чтобы сделать это, как в примере воспроизведения / паузы (с использованием js)?

<script>
function play(){
var video = document.getElementById('movie');
var play =  document.getElementById('play');

play.addEventListener('click',playControl,false);
function playControl() {
    if (video.paused == false) {
        video.pause();
    this.firstChild.nodeValue = 'Play';
    pauseCount();
} else {
    video.play();
    this.firstChild.nodeValue = 'Pause';
    startCount();
}
}
}

Answer 1

В основном все, что вам нужно, это создать функцию (запускаемую полноэкранной кнопкой), в которой вы назначаете позицию: абсолютную и более высокий z-индекс для видеооболочки

, которую вы назначите и видео, иширина и высота видеооболочки: 100% (или фиксированный размер, если вы предпочитаете)

, вероятно, лучший способ добиться этого поведения - определить класс (например, в полноэкранном режиме) и назначить его контейнеру, что-то вроде

.fullscreen {
   position : absolute;
   z-index  : 1000;
   width    : 100%;
   height   : 100%;
   top      : 0;
   left     : 0;
}

.fullscreen video {
   width    : 100%;
   height   : 100%;
}

, поэтому вызов функции (полноэкранный режим / нормальный просмотр) является переключателем для класса .fullscreen.