HTML5手机视频播放器代码适配哪些设备？-网页设计-锦华智联科技

最基础的 HTML5 视频播放器代码

这是最简单、最核心的实现方式，直接使用 <video>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">基础HTML5视频播放器</title>
    <style>
        /* 确保视频填充整个屏幕 */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* 防止出现滚动条 */
        }
        video {
            width: 100%;
            height: 100%;
            object-fit: contain; /* 保持视频比例，防止变形 */
        }
    </style>
</head>
<body>
    <video controls>
        <!-- 
          src: 视频文件的路径
          controls: 显示浏览器自带的播放控制条
        -->
        <source src="your-video-file.mp4" type="video/mp4">
        <!-- 
          提供兼容性备选方案，如果浏览器不支持 mp4，可以尝试 ogg 或 webm
        -->
        <source src="your-video-file.webm" type="video/webm">
        <!-- 如果浏览器不支持 video 标签，则显示此段文字 -->
        您的浏览器不支持 HTML5 视频，请升级您的浏览器。
    </video>
</body>
</html>


代码解释:
（图片来源网络，侵删）

<meta name="viewport" ...>: 这是移动端开发至关重要的一行，它告诉浏览器如何控制页面的尺寸和缩放。user-scalable=no 禁用了用户手动缩放,可以避免视频播放时的一些意外问题。
<video>: HTML5 的核心元素,用于嵌入视频内容。

controls 属性: 添加此属性后，浏览器会自动显示一个包含播放/暂停、音量、进度条等功能的控制栏。
<source>: 可以提供多个视频源，浏览器会按照顺序尝试加载，直到找到一个它支持的格式，这为不同浏览器提供了兼容性保障。
type="video/mp4": 指定文件类型，帮助浏览器快速判断是否能播放,避免不必要的下载尝试。


CSS 样式:
width: 100%; height: 100%: 让视频元素充满整个视口。
object-fit: contain: 这是一个非常实用的属性，它会保持视频的原始宽高比，同时确保视频完全显示在容器内（可能会在两侧或上下留出黑边），防止视频被拉伸或压缩变形，如果你想让它填满（可能裁剪视频），可以设置为 cover。




更优化的移动端视频播放器代码
移动端用户期望的是全屏、沉浸式的体验，原生 controls 在不同手机上样式不一，且功能有限，下面是一个更高级的示例，它结合了 HLS.js 库来实现更强大的兼容性和控制能力,特别是针对直播和自适应码率流。
第一步：准备 HLS.js 库
您可以从 HLS.js 官网 下载库文件，或者直接使用 CDN 链接。
第二步：编写 HTML 和 JavaScript 代码
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">优化版移动端视频播放器</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .video-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        #videoPlayer {
            width: 100%;
            height: 100%;
            object-fit: contain;
            background-color: #000;
        }
        /* 自定义控制栏样式 */
        .custom-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            padding: 10px;
            opacity: 0; /* 默认隐藏 */
            transition: opacity 0.3s;
            pointer-events: none; /* 防止它拦截触摸事件 */
        }
        .custom-controls.visible {
            opacity: 1;
            pointer-events: auto; /* 只有在显示时才响应事件 */
        }
        .control-bar {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .play-pause-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        .progress-bar {
            flex-grow: 1;
            height: 5px;
            background: rgba(255,255,255,0.3);
            border-radius: 5px;
            cursor: pointer;
            position: relative;
        }
        .progress {
            height: 100%;
            background: #e50914; /* Netflix 红色 */
            border-radius: 5px;
            width: 0%;
        }
        .time-display {
            font-size: 12px;
            min-width: 80px;
        }
        .fullscreen-btn {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <!-- video 标签不需要 controls 属性，我们将用JS控制 -->
        <video id="videoPlayer"></video>
        <!-- 自定义控制栏 -->
        <div class="custom-controls" id="customControls">
            <div class="control-bar">
                <button class="play-pause-btn" id="playPauseBtn">▶️</button>
                <div class="progress-bar" id="progressBar">
                    <div class="progress" id="progress"></div>
                </div>
                <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
                <button class="fullscreen-btn" id="fullscreenBtn">⛶</button>
            </div>
        </div>
    </div>
    <!-- 引入 hls.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('videoPlayer');
            const customControls = document.getElementById('customControls');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const progressBar = document.getElementById('progressBar');
            const progress = document.getElementById('progress');
            const timeDisplay = document.getElementById('timeDisplay');
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            // 1. 视频源 (可以是 .m3u8 直播流或 .mp4 点播)
            // const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // 一个示例 HLS 流
            const videoSrc = 'your-video-file.mp4'; // 你的视频文件
            // 2. 初始化播放器
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(videoSrc);
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function() {
                    video.play();
                });
            } 
            // 对于支持原生 HLS 的设备 (如 Safari, iOS)
            else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = videoSrc;
                video.addEventListener('loadedmetadata', function() {
                    video.play();
                });
            }
            // 3. 控制栏显示/隐藏逻辑
            let controlsTimeout;
            function showControls() {
                customControls.classList.add('visible');
                clearTimeout(controlsTimeout);
                controlsTimeout = setTimeout(hideControls, 3000); // 3秒后隐藏
            }
            function hideControls() {
                if (!video.paused) { // 只有在播放时才隐藏
                    customControls.classList.remove('visible');
                }
            }
            video.addEventListener('click', showControls);
            video.addEventListener('touchstart', showControls);
            customControls.addEventListener('click', showControls);
            // 4. 播放/暂停按钮
            playPauseBtn.addEventListener('click', function() {
                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            });
            video.addEventListener('play', function() {
                playPauseBtn.textContent = '⏸️';
            });
            video.addEventListener('pause', function() {
                playPauseBtn.textContent = '▶️';
                showControls(); // 暂停时始终显示控制栏
            });
            // 5. 进度条更新
            video.addEventListener('timeupdate', function() {
                const percentage = (video.currentTime / video.duration) * 100;
                progress.style.width = percentage + '%';
                timeDisplay.textContent = formatTime(video.currentTime) + ' / ' + formatTime(video.duration);
            });
            // 6. 进度条拖动
            progressBar.addEventListener('click', function(e) {
                const pos = (e.pageX - progressBar.offsetLeft) / progressBar.offsetWidth;
                video.currentTime = pos * video.duration;
            });
            // 7. 全屏功能
            fullscreenBtn.addEventListener('click', function() {
                if (video.requestFullscreen) {
                    video.requestFullscreen();
                } else if (video.webkitRequestFullscreen) { /* Safari */
                    video.webkitRequestFullscreen();
                } else if (video.msRequestFullscreen) { /* IE11 */
                    video.msRequestFullscreen();
                }
            });
            // 8. 格式化时间辅助函数
            function formatTime(seconds) {
                if (isNaN(seconds)) return '00:00';
                const minutes = Math.floor(seconds / 60);
                seconds = Math.floor(seconds % 60);
                return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
            }
        });
    </script>
</body>
</html>
这个优化版本的优势：

HLS.js 集成:
强大的兼容性: HLS.js 可以让不支持 HLS (.m3u8) 流的浏览器（如 Chrome, Firefox）也能播放,这对于移动端直播和高质量点播至关重要。
自适应码率: HLS 流通常包含不同清晰度的视频片段，播放器会根据用户的网速自动切换,保证流畅播放。


自定义控制栏:
统一体验: 无论在什么手机上,你的播放器看起来都一样。
更好的交互: 你可以完全控制控制栏的样式和行为，例如添加弹幕、倍速播放、清晰度切换等功能。


优化的移动端交互:
自动隐藏控制栏: 点击屏幕后显示控制栏，3秒内无操作自动隐藏,提供沉浸式观影体验。
触摸友好: 进度条可点击跳转,按钮大小适合手指触摸。
全屏支持: 一键进入全屏模式。


更现代的 UI: 使用渐变背景和更简洁的图标,视觉效果更佳。


如何选择和使用？

如果只是简单播放一个固定的 MP4 文件，并且不介意浏览器自带的控制条样式，方案一就足够了,它最简单。
如果你希望播放直播流（.m3u8）、需要自适应码率、或者追求统一的品牌体验和更丰富的功能，强烈推荐使用方案二，这是目前主流移动端视频网站（如 B站、YouTube、Netflix）普遍采用的技术方案。

使用方案二的步骤：

将上面 方案二 的完整代码复制到一个 .html 文件中。
修改 const videoSrc = 'your-video-file.mp4'; 这一行，将其中的路径替换成你自己的视频文件路径，如果你的视频是 HLS 流（通常是 .m3u8 ，直接替换成那个 URL 即可。
在手机浏览器中打开这个 HTML 文件,即可看到效果。
（图片来源网络，侵删）