Question

Firefox现在支持视频html5标记的全屏模式。（右键点击电影..）

有没有办法像这个播放/暂停示例（使用js）一样创建一个控件（html标签）？

<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

基本上你只需要创建一个函数（由全屏按钮触发），在该函数中为视频包装器指定一个位置：absolute和一个更高的z-index

您将分配视频和视频包装的宽度和高度：100％（如果您愿意，则为固定大小）

实现此行为的最佳方法可能是定义一个类（例如全屏）并将其分配给容器，如

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

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

所以函数调用（全屏/普通视图）是.fullscreen类的开关。

Firefox 3.6视频全屏控制

1 个答案: