H5 页面video标签，在安卓手机中播放视频，有时候显示控制条，有时候不显示什么原因呢？怎么修改？

Question

H5 页面video标签，播放视频，有时候显示控制条，有时候不显示什么原因呢？怎么修改？

 <video
                ref="videoRefs"
                :data-titleId="videoItem.titleId"
                :data-titleAppId="videoItem.titleAppId"
                class="video-player"
                controls
                controlslist="nodownload"
                playsinline="playsinline"
                :poster="videoItem.landscapePost"
                :src="videoItem.url"
                webkit-playsinline="true"
                x-webkit-airplay="allow"
                x5-video-orientation="portrait"
                x5-video-player-fullscreen="false"
                x5-video-player-type="h5"
                style="display: block"
              >
                <!-- type="application/x-mpegURL" -->
                <source :src="videoItem.url" />
              </video>

Answer 1

html5 video 标签，不同的浏览器实现有差异。
专门做播放器的，统一叫法就是浏览器对播放器的劫持。

尽可能实现一致的播放体验，会用到第三方播放器的自定义播放控制逻辑。
这个可选择性就很多了， 比如， flv.js , hls.js ， sharkplayer 等等，根据要播放的媒体格式，自行选择。

Answer 2

<!-- VideoPlayer.vue -->
<template>
  <div class="video-container">
    <!-- 视频播放器 -->
    <video
      ref="videoRefs"
      class="video-player"
      controls
      controlslist="nodownload nofullscreen"
      playsinline="playsinline"
      webkit-playsinline="true"
      x-webkit-airplay="allow"
      x5-video-orientation="portrait"
      x5-video-player-type="h5"
      x5-video-player-fullscreen="false"
      :poster="videoItem.landscapePost"
      :src="videoItem.url"
      @play="onPlay"
      @pause="onPause"
      @timeupdate="onTimeUpdate"
      @ended="onEnded"
    >
      <source :src="videoItem.url" type="video/mp4" />
     
    </video>

    <!--  -->
    <div class="custom-controls" v-show="showCustomControls">
      <!-- 播放/暂停按钮 -->
      <button class="control-btn" @click="togglePlay">
        {{ isPlaying ? '暂停' : '播放' }}
      </button>

      <!-- 进度条 -->
      <div class="progress-bar">
        <input
          type="range"
          :value="progress"
          min="0"
          max="100"
          @input="updateProgress"
          @mousedown="isDragging = true"
          @mouseup="isDragging = false"
        />
        <span class="time">{{ currentTime }}/{{ totalTime }}</span>
      </div>

      <!-- 音量控制 -->
      <div class="volume-control">
        <button class="control-btn" @click="toggleMute">
          {{ isMuted ? '取消静音' : '静音' }}
        </button>
        <input
          type="range"
          :value="volume"
          min="0"
          max="1"
          step="0.1"
          @input="updateVolume"
        />
      </div>

      <!-- 全屏按钮 -->
      <button class="control-btn" @click="toggleFullscreen">
        {{ isFullscreen ? '退出全屏' : '全屏' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    videoItem: {
      type: Object,
      required: true,
      default: () => ({
        url: '',
        landscapePost: '',
        titleId: '',
        titleAppId: ''
      })
    }
  },
  data() {
    return {
      isPlaying: false,
      isMuted: false,
      isFullscreen: false,
      isDragging: false,
      progress: 0,
      volume: 1,
      currentTime: '00:00',
      totalTime: '00:00',
      showCustomControls: true
    }
  },
  mounted() {
    // 初始化视频播放器
    this.initVideoPlayer()
    // 添加事件监听
    this.addEventListeners()
  },
  beforeDestroy() {
    // 清理事件监听
    this.removeEventListeners()
  },
  methods: {
    initVideoPlayer() {
      const video = this.$refs.videoRefs
      if (!video) return

      // 设置初始音量
      video.volume = this.volume
      // 格式化总时长
      this.totalTime = this.formatTime(video.duration)
    },

    addEventListeners() {
      const video = this.$refs.videoRefs
      if (!video) return

      video.addEventListener('touchstart', this.handleTouchStart)
      document.addEventListener('fullscreenchange', this.onFullscreenChange)
      document.addEventListener('webkitfullscreenchange', this.onFullscreenChange)
    },

    removeEventListeners() {
      const video = this.$refs.videoRefs
      if (!video) return

      video.removeEventListener('touchstart', this.handleTouchStart)
      document.removeEventListener('fullscreenchange', this.onFullscreenChange)
      document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange)
    },

    handleTouchStart() {
      // 确保控制条显示
      const video = this.$refs.videoRefs
      if (video) {
        video.controls = true
        setTimeout(() => {
          video.controls = true
        }, 100)
      }
    },

    togglePlay() {
      const video = this.$refs.videoRefs
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    },

    updateVolume(e) {
      const video = this.$refs.videoRefs
      this.volume = parseFloat(e.target.value)
      video.volume = this.volume
      video.muted = this.volume === 0
      this.isMuted = video.muted
    },

    toggleMute() {
      const video = this.$refs.videoRefs
      video.muted = !video.muted
      this.isMuted = video.muted
    },

    // 进度控制
    updateProgress(e) {
      const video = this.$refs.videoRefs
      const newTime = (video.duration * e.target.value) / 100
      video.currentTime = newTime
      this.progress = e.target.value
    },

    // 全屏控制
    toggleFullscreen() {
      const video = this.$refs.videoRefs
      if (!document.fullscreenElement) {
        video.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },

    // 事件处理器
    onPlay() {
      this.isPlaying = true
    },

    onPause() {
      this.isPlaying = false
    },

    onTimeUpdate() {
      if (this.isDragging) return
      const video = this.$refs.videoRefs
      this.progress = (video.currentTime / video.duration) * 100
      this.currentTime = this.formatTime(video.currentTime)
    },

    onEnded() {
      this.isPlaying = false
      this.progress = 0
    },

    onFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement
    },

    // 工具方法
    formatTime(seconds) {
      if (isNaN(seconds)) return '00:00'
      const minutes = Math.floor(seconds / 60)
      seconds = Math.floor(seconds % 60)
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: #000;
}

.video-player {
  width: 100%;
  height: auto;
  display: block;
  -webkit-tap-highlight-color: transparent;
}

/* 确保原生控制条显示 */
.video-player::-webkit-media-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.video-player::-webkit-media-controls-enclosure {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 自定义控制条样式 */
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.progress-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar input[type="range"] {
  flex: 1;
  height: 4px;
}

.time {
  color: #fff;
  font-size: 12px;
  min-width: 100px;
  text-align: center;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

.volume-control input[type="range"] {
  width: 80px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .custom-controls {
    padding: 5px;
  }

  .control-btn {
    padding: 3px 6px;
    font-size: 12px;
  }

  .time {
    min-width: 70px;
    font-size: 10px;
  }

  .volume-control input[type="range"] {
    width: 60px;
  }
}
</style>

Answer 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player</title>
    <style>
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background: #000;
            position: relative;
        }

        .video-player {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* 确保控制条显示 */
        video::-webkit-media-controls {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        video::-webkit-media-controls-enclosure {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* 自定义控制条样式 */
        video::-webkit-media-controls-panel {
            background-color: rgba(0, 0, 0, 0.6);
        }

        video::-webkit-media-controls-play-button {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
        }

        video::-webkit-media-controls-timeline {
            background-color: rgba(255, 255, 255, 0.2);
        }

        video::-webkit-media-controls-current-time-display,
        video::-webkit-media-controls-time-remaining-display {
            color: #fff;
        }

        /* 移动端样式优化 */
        @media (max-width: 768px) {
            video::-webkit-media-controls-panel {
                padding: 0 10px;
            }
            
            video::-webkit-media-controls-timeline {
                height: 3px;
            }
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video 
            id="videoPlayer"
            class="video-player"
            controls
            controlslist="nodownload noplaybackrate"
            playsinline="true"
            webkit-playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline="true"
            preload="auto"
        >
            <source src="your-video-url.mp4" type="video/mp4">
            您的浏览器不支持 video 标签
        </video>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('videoPlayer');
            
            // 设置默认音量
            video.volume = 0.7;

            // 播放事件
            video.addEventListener('play', function() {
                console.log('视频开始播放');
            });

            // 暂停事件
            video.addEventListener('pause', function() {
                console.log('视频暂停');
            });

            // 结束事件
            video.addEventListener('ended', function() {
                console.log('视频播放结束');
            });

            // 错误处理
            video.addEventListener('error', function(e) {
                console.error('视频播放错误:', e);
            });

            // 时间更新
            video.addEventListener('timeupdate', function() {
                console.log('当前播放时间:', video.currentTime);
            });

            // 键盘控制
            document.addEventListener('keydown', function(e) {
                switch(e.code) {
                    case 'Space': // 空格键控制播放/暂停
                        e.preventDefault();
                        video.paused ? video.play() : video.pause();
                        break;
                    case 'ArrowLeft': // 左箭头回退5秒
                        video.currentTime = Math.max(0, video.currentTime - 5);
                        break;
                    case 'ArrowRight': // 右箭头前进5秒
                        video.currentTime = Math.min(video.duration, video.currentTime + 5);
                        break;
                    case 'ArrowUp': // 上箭头增加音量
                        video.volume = Math.min(1, video.volume + 0.1);
                        break;
                    case 'ArrowDown': // 下箭头减小音量
                        video.volume = Math.max(0, video.volume - 0.1);
                        break;
                }
            });

            // 移动端兼容性处理
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                // 尝试自动播放
                video.play().catch(function(error) {
                    console.log("自动播放失败:", error);
                });
            }
        });
    </script>
</body>
</html>

1. 将上面的代码保存为 HTML 文件
2. 修改 video 标签中的 src 属性为你的视频地址
3. 如果需要设置封面图,添加 poster 属性:

<video poster="your-poster-url.jpg" ...>

主要特点:

1. 兼容性处理:

   • 支持 iOS、Android 等移动端
   • 支持微信内置浏览器
   • 确保控制条显示

2. 功能支持:

   • 键盘控制(空格播放/暂停,方向键控制进度和音量)
   • 禁用下载和播放速度控制
   • 自动检测移动端环境

3. 样式优化:

   • 自定义控制条样式
   • 移动端适配
   • 响应式布局

4. 事件处理:

   • 播放/暂停事件
   • 结束事件
   • 错误处理
   • 时间更新监听