html video设置全屏播放

在使用HTML5video> 元素播放视频时，为了让用户更好地观看，我们可能需要将视频全屏播放。

要设置全屏播放，在HTML代码中增加以下属性：controls控制栏显示，autoplay自动播放，playsinline内联播放（在iOS设备上有效）和webkit-playsinline内联播放（在Android设备上有效）。

video controls autoplay playsinline webkit-playsinline>
    source src="video.mp4" type="video/mp4">
    /video>
    

要实现全屏播放，我们需要添加额外的JavaScript代码。以下是使用全屏API实现全屏播放的示例代码：

var video = document.querySelector('video');
    // 如果当前支持全屏APIif (video &
    &
 video.requestFullscreen) {
// 单击视频时触发全屏video.addEventListener('click', function () {
    video.requestFullscreen();
}
    );
}

当用户在视频上单击时，JavaScript将请求全屏。当用户退出全屏时，会自动触发fullscreenchange事件，你可以在其中添加额外的代码。

document.addEventListener('fullscreenchange', function (e) {
if (document.fullscreenElement) {
    console.log('进入全屏');
}
 else {
    console.log('退出全屏');
}
}
    );
    

使用以上代码，我们可以通过全屏API来实现全屏播放。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！