Html,css,js，写一个视频万能播放器，包括会员限制，广告限制，的详细代码

本文链接：https://blog.csdn.net/qq512929249/article/details/135313274

创建一个视频万能播放器涉及多个组件和功能，这里我会为你提供一个简单的HTML、CSS和JavaScript的示例代码，你可以在此基础上进行扩展和定制。

HTML:

html

复制

<!DOCTYPE html><html lang="en"><head>

<title>视频万能播放器</title>

Your browser does not support the video tag.

</video>

</div>

</div>

CSS (styles.css):

css

复制

body {

font-family: Arial, sans-serif;

}

.video-container {

width: 640px;

margin: 0 auto;

}

.controls {

margin-top: 10px;

}

JavaScript (script.js):

javascript

复制

let videoPlayer = document.getElementById('videoPlayer');

let playButton = document.getElementById('playButton');

let pauseButton = document.getElementById('pauseButton');

let replayButton = document.getElementById('replayButton');

let isPlaying = false;

let currentTime = 0;

let videoDuration = 0;

let videoSrc; // 用于存储视频源地址，可从后端获取或直接在JavaScript中设置。let isAdActive = false; // 用于标识是否正在播放广告。let isMember = false; // 用于标识用户是否为会员。let adDuration = 5; // 广告时长（秒）。let videoFile; // 视频文件地址。let adFile; // 广告文件地址。let isPausedByAd = false; // 标识是否因广告而暂停。let startTime = null; // 记录视频开始时间。let endTime = null; // 记录广告结束时间。let adStartedAt = null; // 记录广告开始时间。let videoStartedAt = null; // 记录视频开始时间。let isFirstPlay = true; // 标识是否为首次播放。let isPausedByUser = false; // 标识是否因用户操作而暂停。let totalPlayTime = 0; // 总播放时间（秒）。let isPausedByAdTimer; // 用于在广告结束后暂停视频的定时器。let isPlayingTimer; // 用于在视频播放时暂停广告的定时器。let videoEndTimer; // 用于在视频结束时暂停视频的定时器。let isFirstAdPlayed = true; // 标识是否已播放过广告。let isFirstVideoPlayed = true; // 标识是否已播放过视频。let adVideoPlayer; // 广告视频播放器对象。let videoSource; // 视频源对象。let adSource; // 广告源对象。let adVideoDuration; // 广告视频时长（秒）。let adVideoTimeElapsed = 0; // 广告已播放时间（秒）。let videoVideoTimeElapsed = 0; // 视频已播放时间（秒）。let adVideoDurationDisplay = document.getElementById('adVideoDuration'); // 用于显示广告剩余时间的元素。