feat(video): 添加视频自动全屏功能

Administrator

10 hours ago a988d074b876d2e7e6079829e13988767e3ec460

feat(video): 添加视频自动全屏功能

- 实现跨浏览器兼容的全屏请求函数
- 集成视频播放时自动全屏功能
- 添加全屏请求失败的错误处理
- 实现视频canplay事件触发自动播放
- 添加自动全屏和播放失败的用户提示
- 优化视频加载完成后的用户体验

 src/main/resources/static/febs/videoNative.html

@@ -177,6 +177,20 @@
            });
        }

        // 兼容不同浏览器的全屏请求函数
        function requestFullscreen(element) {
            if (element.requestFullscreen) {
                return element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                return element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                return element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                return element.msRequestFullscreen();
            }
            return Promise.reject(new Error('当前浏览器不支持全屏API'));
        }

        // 加载视频
        function loadVideo(videoUrl) {
            var videoPlayer = document.getElementById('videoPlayer');
@@ -212,9 +226,21 @@
            
            showMessage('视频加载中...', 'success');
            
            // 视频加载完成事件
            videoPlayer.addEventListener('loadedmetadata', function() {
                showMessage('视频加载完成', 'success');
            // 视频可以播放时尝试自动全屏
            videoPlayer.addEventListener('canplay', function() {
                showMessage('视频加载完成，正在尝试自动全屏...', 'success');
                // 尝试自动全屏
                requestFullscreen(videoPlayer).then(function() {
                    showMessage('视频已自动全屏', 'success');
                }).catch(function(error) {
                    showMessage('自动全屏失败，可能需要手动点击播放', 'error');
                    console.log('全屏请求失败:', error);
                });
                // 开始播放
                videoPlayer.play().catch(function(error) {
                    showMessage('自动播放失败，可能需要手动点击播放', 'error');
                    console.log('自动播放失败:', error);
                });
            });
            
            // 视频加载错误事件