这套代码将包含以下几个部分,从简单到复杂，您可以根据自己的需求选择：

手机网页 mp4视频播放器代码
（图片来源网络，侵删）
  1. 基础版：使用 HTML5 的 <video> 标签，最简单直接。
  2. 推荐版：使用 Video.js 库，功能强大、UI 美观、兼容性好，特别适合移动端。
  3. 进阶版：使用 DPlayer 库，支持弹幕、封面图等更现代的功能。

基础版 (原生 HTML5 <video>)

这是最简单的方法,不需要任何额外的库，优点是轻量，缺点是自定义程度低，在不同浏览器上 UI 可能不一致。

代码示例

<!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">
    <!-- user-scalable=no 禁止用户缩放，对移动端体验更好 -->原生视频播放器</title>
    <style>
        /* 让视频占满整个屏幕，并居中显示 */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
        }
        video {
            width: 100%;
            max-width: 100%; /* 确保视频不会超出屏幕宽度 */
            height: auto;
        }
    </style>
</head>
<body>
    <video controls>
        <!-- 
          controls: 显示浏览器自带的播放控件。
          poster: 视频封面图，在视频加载或未播放时显示。
        -->
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <!-- 
          type 属性非常重要，它告诉浏览器这是一个 MP4 文件。
          如果浏览器不支持 MP4，可以提供其他格式的备用源，如下：
        -->
        <!-- <source src="movie.webm" type="video/webm"> -->
        您的浏览器不支持 HTML5 视频。
    </video>
</body>
</html>

如何使用

  1. 将上面的代码保存为 .html 文件（player.html）。
  2. 将你的 MP4 视频文件放在同一个目录下，或者使用一个网络 URL。
  3. 修改 <source> 标签中的 src 属性，指向你的视频文件路径或 URL。
  4. 用手机浏览器打开这个 HTML 文件即可。

推荐版 (使用 Video.js 库)

Video.js 是一个开源的 HTML5 视频播放器，它提供了统一的、可定制的 UI，并且对移动端触摸操作（如全屏、滑动调节音量和进度）有非常好的支持，这是最推荐的方案。

步骤 1: 引入 Video.js 库文件

你可以通过 CDN（内容分发网络）快速引入，无需下载。

<!-- 引入 Video.js 的 CSS -->
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
<!-- 引入 Video.js 的 JS -->
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>

提示: 你可以去 Video.js 官网 获取最新的 CDN 链接。

手机网页 mp4视频播放器代码
（图片来源网络，侵删）

步骤 2: 编写 HTML 和 JavaScript

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">Video.js 移动端播放器</title>
    <!-- 引入 Video.js 的 CSS -->
    <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            /* 防止 iOS Safari 上的橡皮筋效果 */
            overscroll-behavior: none;
        }
        /* 让播放器占满整个屏幕 */
        .video-js {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 
      video-js 类是 Video.js 必需的。
      controls 属性显示控件。
      vjs-fluid 类让视频保持其宽高比，并填充容器。
    -->
    <video
        id="my-video"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="auto"
        data-setup="{}"
        poster="https://placehold.co/1280x720?text=视频封面"
    >
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <p class="vjs-no-js">
            要观看此视频，请启用 JavaScript，并考虑升级到支持 HTML5 视频的网页浏览器。
            <a href="https://videojs.com/html5-video-support/" target="_blank">
                查看支持的浏览器
            </a>
        </p>
    </video>
    <!-- 引入 Video.js 的 JS -->
    <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
    <!-- 
      你可以在这里初始化播放器，添加自定义设置。
      自动播放（通常需要用户交互，所以可能不生效）：
    -->
    <script>
        // document.querySelector('video').play();
    </script>
</body>
</html>

Video.js 移动端优化点

  • 触摸控制：对滑动、点击等触摸手势有很好的支持。
  • 全屏体验：全屏模式下，播放器控件会自动隐藏，点击屏幕区域会重新显示。
  • 响应式设计：vjs-fluid 类可以确保视频在各种屏幕尺寸下都能良好显示。
  • 可定制：你可以轻松更换皮肤、添加插件（如广告、字幕等）。

进阶版 (使用 DPlayer 库)

DPlayer 是一个更现代化的视频播放器，特别适合国内开发者，它以简洁的界面和强大的功能（如弹幕、HLS 直播支持）而闻名。

步骤 1: 引入 DPlayer 库文件

同样,使用 CDN 是最简单的方式。

<!-- 引入 DPlayer 的 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.css">
<!-- 引入 DPlayer 的 JS -->
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>

步骤 2: 编写 HTML 和 JavaScript

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">DPlayer 播放器</title>
    <!-- 引入 DPlayer 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        #dplayer-container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="dplayer-container"></div>
    <!-- 引入 DPlayer 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
    <script>
        const dp = new DPlayer({
            container: document.getElementById('dplayer-container'),
            // 视频地址
            video: {
                url: 'https://www.w3schools.com/html/mov_bbb.mp4',
                // type: 'auto' // 可以指定类型，如 'hls', 'flv' 等，DPlayer 会自动识别
            },
            // 封面地址
            screenshot: true, // 开启截图功能
            // 自动播放 (在移动端通常需要用户交互，所以可能不生效)
            autoplay: false,
            // 主题色
            theme: '#FADFA3',
            // 播放器图标
            loop: false,
            // hotkey: true, // 开启热键
        });
        // 你可以通过 dp 对象控制播放器
        // dp.play(); // 播放
        // dp.pause(); // 暂停
    </script>
</body>
</html>

DPlayer 特色功能

  • 弹幕：内置弹幕功能，非常受年轻用户欢迎。
  • HLS 支持：对 HLS (m3u8) 格式的直播和点播有原生支持，这在处理长视频或直播时非常高效。
  • 简洁 UI：界面设计现代、简洁。
  • 插件化：支持多种插件，如字幕、截图、视频解析等。

总结与建议

特性 基础版 (原生) 推荐版 (Video.js) 进阶版 (DPlayer)
易用性 非常简单 简单 简单
UI/UX 取决于浏览器 统一、美观、移动端优化好 现代、简洁、移动端体验佳
功能 基础播放控制 丰富，可扩展性强 非常丰富（弹幕、HLS等）
自定义 低 高 高
兼容性 现代浏览器都支持 非常好，兼容旧浏览器 非常好
适用场景 快速预览、简单页面 大多数网站项目 带弹幕、直播、追求现代感的网站

给你的建议：

  • 如果只是想在网页上简单嵌入一个视频,不想引入任何外部库，使用 基础版。
  • 如果你在开发一个正式的商业网站或项目,希望有稳定、美观、兼容性好的播放器体验，强烈推荐使用 Video.js。
  • 如果你的项目需要弹幕功能,或者需要支持 HLS 直播，或者你更喜欢它的现代设计，DPlayer 是一个绝佳的选择。
手机网页 mp4视频播放器代码
（图片来源网络，侵删）