简单的HTML5视频播放器皮肤的代码示例(播放/暂停按钮)

简单的HTML5视频播放器皮肤的代码示例，包含播放/暂停按钮、进度条、音量控制和全屏按钮：

<video id="myVideo" width="640" height="360" poster="poster.jpg"> <source src="sample.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="video-controls"> <button id="playPauseBtn">▶</button> <div class="progress-container"> <div class="progress-bar"></div> </div> <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1"> <button id="fullscreenBtn">⛶</button> </div> <style> .video-controls { background-color: rgba(0, 0, 0, 0.7); padding: 10px; display: flex; align-items: center; } #playPauseBtn, #fullscreenBtn { background: none; border: none; color: white; font-size: 16px; margin-right: 10px; cursor: pointer; } .progress-container { flex-grow: 1; height: 5px; background-color: #555; margin: 0 10px; border-radius: 5px; overflow: hidden; } .progress-bar { height: 100%; width: 0; background-color: #ff5252; transition: width 0.1s linear; } #volumeControl { width: 80px; margin-left: 10px; } </style> <script> const video = document.getElementById('myVideo'); const playPauseBtn = document.getElementById('playPauseBtn'); const progressBar = document.querySelector('.progress-bar'); const volumeControl = document.getElementById('volumeControl'); const fullscreenBtn = document.getElementById('fullscreenBtn'); playPauseBtn.addEventListener('click', function() { if (video.paused) { video.play(); playPauseBtn.textContent = '❚❚'; } else { video.pause(); playPauseBtn.textContent = '▶'; } }); video.addEventListener('timeupdate', function() { const percent = (video.currentTime / video.duration) * 100; progressBar.style.width = `${percent}%`; }); progressBar.parentElement.addEventListener('click', function(e) { const pos = (e.pageX - this.offsetLeft) / this.offsetWidth; video.currentTime = pos * video.duration; }); volumeControl.addEventListener('input', function() { video.volume = this.value; }); fullscreenBtn.addEventListener('click', function() { if (video.requestFullscreen) { video.requestFullscreen(); } }); </script>

自定义的视频播放器皮肤，你可以根据需要进一步调整样式和功能.

| 浏览器 | MP4 | WebM | Ogg |
| ----------------- | ------------------ | ---- | --- |
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |

支持的格式

HTML5 Video 支持以下几种视频格式：

• MP4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件，是最广泛支持的格式。

• WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件，由 Google 推广。

• Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件，较少使用，但兼容性较好

[ 视频安全 ] 相关原创文章

• 教育教学类视频如何处理加密与安全（组图）
• 防止360浏览器小窗下载视频
• 视频安全之视频播放密码功能(设置观看密码功能教程)
• 视频安全之授权播放和防录屏跑马灯
• 企业级微信视频直播如何设定观看白名单（设定手机观看白名单、授权观看直播）
• 在线教育网站如何更好的实现视频安全视频保护？
• 免费视频二维码的完整使用教程（适合小企业做微信视频宣传）
• Html5视频video标签中使用blob实现视频播放加密