在互联网时代，视频已经成为信息传递和娱乐消费的重要方式。随着HTML5标准的普及，我们可以通过纯HTML5技术实现无需插件即可在线观看MP4视频的播放器。本文将详细介绍如何打造这样一个播放器，并实现视频播放与全屏控制功能。

1. HTML5播放器的基本结构

首先，我们需要创建一个HTML5播放器的基本结构。以下是一个简单的HTML5播放器代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5播放器</title>
</head>
<body>
    <video id="videoPlayer" controls>
        <source src="example.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
</body>
</html>

在这个示例中，我们使用<video>标签创建了一个视频播放器，并通过<source>标签指定了视频文件的路径和类型。

2. 添加视频播放与全屏控制功能

为了实现视频播放与全屏控制功能，我们需要使用JavaScript来控制视频播放器的行为。以下是一个简单的JavaScript代码示例：

// 获取视频播放器元素
var videoPlayer = document.getElementById('videoPlayer');

// 播放视频
function playVideo() {
    videoPlayer.play();
}

// 暂停视频
function pauseVideo() {
    videoPlayer.pause();
}

// 全屏播放
function fullScreen() {
    if (videoPlayer.requestFullscreen) {
        videoPlayer.requestFullscreen();
    } else if (videoPlayer.mozRequestFullScreen) { /* Firefox */
        videoPlayer.mozRequestFullScreen();
    } else if (videoPlayer.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        videoPlayer.webkitRequestFullscreen();
    } else if (videoPlayer.msRequestFullscreen) { /* IE/Edge */
        videoPlayer.msRequestFullscreen();
    }
}

// 控制按钮点击事件
document.getElementById('playBtn').addEventListener('click', playVideo);
document.getElementById('pauseBtn').addEventListener('click', pauseVideo);
document.getElementById('fullScreenBtn').addEventListener('click', fullScreen);

在这个示例中，我们定义了playVideo、pauseVideo和fullScreen三个函数，分别用于播放视频、暂停视频和全屏播放。同时，我们为控制按钮添加了点击事件监听器，以便在用户点击按钮时触发相应的功能。

3. 完善播放器界面

为了使播放器更加美观和实用，我们可以添加一些额外的HTML和CSS代码。以下是一个简单的播放器界面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5播放器</title>
    <style>
        #videoPlayer {
            width: 100%;
            height: 500px;
        }
        .controls {
            position: relative;
            width: 100%;
            height: 50px;
            background-color: #000;
            color: #fff;
            text-align: center;
        }
        .controls button {
            margin: 5px;
            padding: 5px 10px;
            background-color: #333;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <video id="videoPlayer" controls>
        <source src="example.mp4" type="video/mp4">
        您的浏览器不支持视频标签。
    </video>
    <div class="controls">
        <button id="playBtn">播放</button>
        <button id="pauseBtn">暂停</button>
        <button id="fullScreenBtn">全屏</button>
    </div>
</body>
</html>

在这个示例中，我们为播放器添加了一个控制面板，其中包含了播放、暂停和全屏按钮。同时，我们还为播放器和控制面板添加了一些CSS样式，以使界面更加美观。

4. 总结

通过以上步骤，我们可以轻松地打造一个无需插件即可在线观看MP4视频的HTML5播放器，并实现视频播放与全屏控制功能。在实际应用中，您可以根据需求对播放器进行扩展和优化，例如添加进度条、时间显示、音量控制等功能。