|
|
@@ -8,7 +8,6 @@
|
|
|
class="full-box-video"
|
|
|
ref="videoRef"
|
|
|
:controls="true"
|
|
|
- :controlsList="'nofullscreen'"
|
|
|
@timeupdate="handleTimeUpdate"
|
|
|
@seeked="handleSeeked"
|
|
|
@ended="handleVideoEnded"
|
|
|
@@ -36,17 +35,6 @@
|
|
|
@click="seekToTime(marker.time)"
|
|
|
></div>
|
|
|
</div>
|
|
|
- <!-- 网页全屏按钮 -->
|
|
|
- <el-tooltip
|
|
|
- :content="isWebFullscreen ? '退出网页全屏' : '进入网页全屏'"
|
|
|
- placement="left"
|
|
|
- effect="dark"
|
|
|
- >
|
|
|
- <div class="fullscreen-btn" @click="toggleWebFullscreen">
|
|
|
- <el-icon v-if="!isWebFullscreen"><FullScreen /></el-icon>
|
|
|
- <el-icon v-else><Close /></el-icon>
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -334,6 +322,46 @@ const initVideoPlayer = () => {
|
|
|
// 为视频元素添加键盘事件监听器
|
|
|
addVideoKeyboardListener();
|
|
|
|
|
|
+ // 监听全屏状态变化事件
|
|
|
+ const handleFullscreenChange = () => {
|
|
|
+ // 检查是否处于全屏状态
|
|
|
+ const isFullscreen = !!(document.fullscreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.msFullscreenElement);
|
|
|
+
|
|
|
+ // 如果正在进入全屏状态,退出默认全屏并调用自定义方法
|
|
|
+ if (isFullscreen) {
|
|
|
+ // 退出默认全屏
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 调用自定义的网页全屏方法
|
|
|
+ toggleWebFullscreen();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加全屏状态变化事件监听
|
|
|
+ document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
+ document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
|
|
|
+ document.addEventListener('mozfullscreenchange', handleFullscreenChange);
|
|
|
+ document.addEventListener('MSFullscreenChange', handleFullscreenChange);
|
|
|
+
|
|
|
+ // 组件卸载时移除事件监听
|
|
|
+ onBeforeUnmount(() => {
|
|
|
+ document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
+ document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
|
|
|
+ document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
|
|
|
+ document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
|
|
|
+ });
|
|
|
+
|
|
|
// 检查视频路径是否是m3u8格式
|
|
|
if (props.videoPath && props.videoPath.toLowerCase().endsWith('.m3u8')) {
|
|
|
// 使用HLS播放
|
|
|
@@ -717,41 +745,4 @@ video::-webkit-media-controls-panel:not([hidden]) ~ .progress-markers {
|
|
|
.history-tip:hover {
|
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
}
|
|
|
-
|
|
|
-/* 网页全屏按钮样式 */
|
|
|
-.fullscreen-btn {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 10px;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- color: white;
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 15;
|
|
|
- transition: all 0.3s ease;
|
|
|
-}
|
|
|
-
|
|
|
-.fullscreen-btn:hover {
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
-}
|
|
|
-
|
|
|
-/* 调整视频控件样式以适应我们的自定义标记 */
|
|
|
-video::-webkit-media-controls-timeline {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-video::-webkit-media-controls {
|
|
|
- overflow: visible !important;
|
|
|
-}
|
|
|
-
|
|
|
-video::-webkit-media-controls-panel {
|
|
|
- width: calc(100% + 30px); /* 扩展控件面板宽度,确保与自定义标记对齐 */
|
|
|
- background: transparent !important; /* 去掉背景渐变,设为透明 */
|
|
|
-}
|
|
|
-
|
|
|
</style>
|