将嵌入式 YouTube 视频时间戳同步到自定义进度条
Posted
技术标签:
【中文标题】将嵌入式 YouTube 视频时间戳同步到自定义进度条【英文标题】：Sync Embedded YouTube Video Time Stamp to Custom Progress Bar 【发布时间】：2016-10-20 15:29:13 【问题描述】：我被困在我今天一直在做的一个项目的一部分上。任务是从嵌入的 youtube 视频同步时间戳信息，并在页面底部显示与歌曲长度匹配的自定义进度条。到目前为止的布局如下：
所以基本上，我如何拉恒定时间戳来更新进度以及如何为栏设置动画以完成 100% 匹配视频的结尾。
我已经禁用了用户对嵌入的 youtube 视频进行乱码的功能。注意：用户也不应该能够使用自定义进度条更改 youtube 视频的时间（它只是用于视觉队列）！
如果您需要更多说明，请告诉我。 html和CSS如下。谢谢！！ :)
HTML >>>
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container-middle-third">
<div class="youtube-video" style="float: left;">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<div class="transparent-layer"> <iframe src="https://www.youtube.com/embed/2GvIq2SpVFM?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="chat" style="float: left;">
<div class="Chat-text">Chat</div>
<div class="Chat-underline"></div>
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</div>
<div class="bottom-bar">
<div class="thumbnail" style="float: left"></div>
<div class="title-bar" style="float: left;">
<div class="song-name">Finding Hope - Let Go (feat. Deverano)</div>
<div class="dj-playing">Affinity FM is playing</div>
<div class="progress-background"></div>
<div class="progress-bar"></div>
</div>
<div class="subscribe" style="float: left;"></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function()
var getNode = function(s)
return document.querySelector(s);
,
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s)
status.textContent = s;
if(s !== statusDefault)
var delay = setTimeout(function()
setStatus(statusDefault);
clearInterval(delay);
, 3000);
;
//try connection
try
var socket = io.connect('http://127.0.0.1:8080');
catch(e)
//Set status to warn user
if(socket !== undefined)
//Listen for output
socket.on('output', function(data)
if(data.length)
//Loop through results
for(var x = 0; x < data.length; x = x + 1)
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
);
//Listen for a status
socket.on('status', function(data)
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true)
textarea.value = '';
);
//Listen for keydown
textarea.addEventListener('keydown', function(event)
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false)
socket.emit('input',
name: name,
message: self.value
);
);
)();
</script>
</body>
</html>
和 CSS >>>
body
background-color: #0f0f17;
margin: 0px;
width: 100%;
.container-middle-third
margin-top: 20px;
margin-left: 155px;
body,
textarea,
input
font: 13px "Raleway", sans-serif;
color: #ffffff;
.bar
height: 80px;
width: 100%;
background-color: #15151d;
.DJ-text
font-weight: 700;
/*position:relative;*/
text-transform: uppercase;
.Chat-text
font-weight: 700;
text-transform: uppercase;
.DJ-underline
width: 850px;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
.Chat-underline
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
.transparent-layer
width: 850px;
height: 477px;
pointer-events: none;
background-color: #ffffff;
.ad
width: 728px;
height: 90px;
border: 1px solid #000000;
margin-left: 11px;
margin-top: 20px;
.chat
min-width: 400px;
margin: 0px 0px 0px 135px;
.chat-messages,
.chat-textarea,
.chat-name
border: 1px solid #1a1a23;
background-color: #1a1a23;
.userName
font-weight: 700;
color: #079ce0;
.chat-messages
width:380px;
height:400px;
overflow-y:scroll;
padding:10px;
.chat-message
margin-bottom:10px;
.info-rect
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
background-color: #15151d
.chat-name
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
.chat textarea
width:380px;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
.chat-status
color: #bbb;
opacity: 0;
background-color: #0f0f17;
.info-rect,
.chat textarea,
.chat-name
max-width: 100%;
.bottom-bar
position: fixed;
bottom: 0;
width: 100%;
.thumbnail
width: 80px;
height: 80px;
background-color: #ffffff
.title-bar
width:1000px;
height: 80px;
background-color: #1a1a23;
.song-name
font-weight: 700;
text-transform: uppercase;
margin-left: 30px;
margin-top: 25px;
.dj-playing
margin-left: 30px;
.progress-background
width: 1000px;
height: 4px;
background-color: #313139;
position: fixed;
bottom: 0;
.progress-bar
width: 400px;
height: 4px;
background-color: #fa1d57;
position: fixed;
bottom: 0;
.subscribe
width: 520px;
height: 80px;
background-color: #15151d;
【问题讨论】：
【参考方案1】：喜欢你的问题！
用带有id="player"的div切换iframe（任何你想要的名字，它可以是“my_own_player”或“XYZ_player”...）
那么现在您已经准备好将您的 iframe 播放器转换为 Youtube 播放器对象，以便您可以使用“IFrame 播放器 API”完成您想要的。
确保您的 div 样式与您想要的 iframe 相同。
只需添加以下脚本：
//This function creates an <iframe> (and YouTube player)
function onYouTubeIframeAPIReady()
player = new YT.Player("player",
height: "850",
width: "477",
videoId: "2GvIq2SpVFM",
events:
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
);
将 videoId 替换为您的视频 ID。
将height 替换为视频的高度。
将width 替换为视频的宽度。
现在，像你说的那样获得“视频时间戳”，以便使进度条变得容易。播放器对象有两个方法可以做到这一点：
getCurrentTime()
getDuration()
getDuration 是视频的总时间，以秒为单位。而getCurrentTime 是视频播放的时间。划分
getCurrentTime by getDuration，您将获得进度条的比率。将其乘以 100 即可得到所需的百分比：
(player.getCurrentTime()/player.getDuration())*100;
就是这样！一旦你得到一个代表 getCurrentTime / getDuration 的百分比，你就不需要其他任何东西来制作 html 进度条了。只需将该 html bar 元素的宽度设置为该百分比即可。只需确保红色“条”的背景（另一个 div）很容易被识别为进度条的外部限制。或者只是将它放在页面上可见的另一个 div 中，如下所示：
<div id="progress" style="width: 800px; height: 10px; border: 1px solid #fff;">
<div id="bar" style="width: 1px; height: 10px; background: #f00;"></div>
</div>
请尝试一下您修改后的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header-bar">
<div class="bar"></div>
<div class="dropshadow"></div>
</div>
<div class="container-middle-third">
<div class="youtube-video" style="float: left;">
<div class="DJ-text">Affinity FM DJ Room</div>
<div class="DJ-underline"></div>
<div class="transparent-layer"> <div id="player" style="width: 850px; height: 477px;"></div></div>
</div>
<div class="chat" style="float: left;">
<div class="Chat-text">Chat</div>
<div class="Chat-underline"></div>
<input type="text" class="chat-name" placeholder="Chat">
<div class="info-rect">Info</div>
<div class="chat-messages"></div>
<textarea placeholder="Join the conversation..."></textarea>
<div class="chat-status">Status: <span>Idle</span></div>
</div>
</div>
<div class="bottom-bar">
<div class="thumbnail" style="float: left"></div>
<div class="title-bar" style="float: left;">
<div class="song-name">Finding Hope - Let Go (feat. Deverano)</div>
<div class="dj-playing">Affinity FM is playing</div>
<div class="progress-background">
<div id="progress-bar" class="progress-bar"></div>
</div>
</div>
<div class="subscribe" style="float: left;"></div>
</div>
<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>
<script>
(function()
var getNode = function(s)
return document.querySelector(s);
,
// Get required nodes
status = getNode('.chat-status span'),
messages = getNode('.chat-messages'),
textarea = getNode('.chat textarea'),
chatName = getNode('.chat-name'),
statusDefault = status.textContent,
setStatus = function(s)
status.textContent = s;
if(s !== statusDefault)
var delay = setTimeout(function()
setStatus(statusDefault);
clearInterval(delay);
, 3000);
;
//try connection
try
var socket = io.connect('http://127.0.0.1:8080');
catch(e)
//Set status to warn user
if(socket !== undefined)
//Listen for output
socket.on('output', function(data)
if(data.length)
//Loop through results
for(var x = 0; x < data.length; x = x + 1)
var message = document.createElement('div');
message.setAttribute('class', 'chat-message');
message.textContent = ': ' + data[x].message;
var name=document.createElement('span');
name.setAttribute('class', 'userName');
name.textContent = data[x].name;
message.insertBefore(name, message.firstChild);
//Append
messages.appendChild(message);
messages.insertBefore(message, messages.firstChild);
);
//Listen for a status
socket.on('status', function(data)
setStatus((typeof data === 'object') ? data.message : data);
if(data.clear === true)
textarea.value = '';
);
//Listen for keydown
textarea.addEventListener('keydown', function(event)
var self = this,
name = chatName.value;
if(event.which === 13 && event.shiftKey === false)
socket.emit('input',
name: name,
message: self.value
);
);
)();
</script>
<script>
var time_total;
var timeout_setter;
var player;
var tag = document.createElement("script");//This code loads the IFrame Player API code asynchronously
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//This function creates an <iframe> (and YouTube player) OR uses the iframe if it exists at the "player" element after the API code downloads
function onYouTubeIframeAPIReady()
player = new YT.Player("player",
height: "850",
width: "477",
videoId: "2GvIq2SpVFM",
events:
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
);
//The API will call this function when the video player is ready
function onPlayerReady(event)
event.target.playVideo();
time_total = convert_to_mins_and_secs(player.getDuration(), 1);
loopy();
function loopy()
var current_time = convert_to_mins_and_secs(player.getCurrentTime(), 0);
document.getElementById("progress-bar").style.width = (player.getCurrentTime()/player.getDuration())*100+"%";
console.log( current_time + " / " + time_total);
timeout_setter = setTimeout(loopy, 1000);
function convert_to_mins_and_secs(seconds, minus1)
var mins = (seconds>=60) ?Math.round(seconds/60):0;
var secs = (seconds%60!=0) ?Math.round(seconds%60):0;
var secs = (minus1==true) ?(secs-1):secs; //Youtube always displays 1 sec less than its duration time!!! Then we have to set minus1 flag to true for converting player.getDuration()
var time = mins + ":" + ((secs<10)?"0"+secs:secs);
return time;
// 5. The API calls this function when the player's state changes
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.ENDED)
console.log("END!");
clearTimeout(timeout_setter);
else
console.log(event.data);
</script>
</body>
</html>
使用您的 CSS：
body
background-color: #0f0f17;
margin: 0px;
width: 100%;
.container-middle-third
margin-top: 20px;
margin-left: 155px;
body,
textarea,
input
font: 13px "Raleway", sans-serif;
color: #ffffff;
.bar
height: 80px;
width: 100%;
background-color: #15151d;
.DJ-text
font-weight: 700;
/*position:relative;*/
text-transform: uppercase;
.Chat-text
font-weight: 700;
text-transform: uppercase;
.DJ-underline
width: 850px;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
.Chat-underline
width: 100%;
position:relative;
/*left:-140px;*/
float:right;
height: 1px;
position:relative;top:10px;
background-color: #3f3f45;
margin: 0px 0px 40px;
.transparent-layer
width: 850px;
height: 477px;
pointer-events: none;
background-color: #ffffff;
.ad
width: 728px;
height: 90px;
border: 1px solid #000000;
margin-left: 11px;
margin-top: 20px;
.chat
min-width: 400px;
margin: 0px 0px 0px 135px;
.chat-messages,
.chat-textarea,
.chat-name
border: 1px solid #1a1a23;
background-color: #1a1a23;
.userName
font-weight: 700;
color: #079ce0;
.chat-messages
width:380px;
height:400px;
overflow-y:scroll;
padding:10px;
.chat-message
margin-bottom:10px;
.info-rect
height: 40px;
width: 180px;
padding:10px;
max-width: 100%;
margin:0;
border:0;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-transform: uppercase;
background-color: #15151d
.chat-name
height: 40px;
max-width: 100%;
width: 180px;
padding:10px;
border:0;
margin:0;
font-weight: 700;
text-transform: uppercase;
float:left;
text-align: center;
.chat textarea
width:380px;
padding:10px;
margin:0;
border-top:0;
max-width:100%;
border-top: 1px solid #0f0f17;
border-bottom: 1px solid #1a1a23;
border-right: 1px solid #1a1a23;
border-left: 1px solid #1a1a23;
background-color: #1a1a23;
.chat-status
color: #bbb;
opacity: 0;
background-color: #0f0f17;
.info-rect,
.chat textarea,
.chat-name
max-width: 100%;
.bottom-bar
position: fixed;
bottom: 0;
width: 100%;
.thumbnail
width: 80px;
height: 80px;
background-color: #ffffff
.title-bar
width:1000px;
height: 80px;
background-color: #1a1a23;
.song-name
font-weight: 700;
text-transform: uppercase;
margin-left: 30px;
margin-top: 25px;
.dj-playing
margin-left: 30px;
.progress-background
width: 1000px;
height: 4px;
background-color: #313139;
position: fixed;
bottom: 0;
.progress-bar
width: 400px;
height: 4px;
background-color: #fa1d57;
position: fixed;
bottom: 0;
.subscribe
width: 520px;
height: 80px;
background-color: #15151d;
或者只看那里的结果： http://lespointscom.com/a/misc/demo/2016_06_19/main.html
IFrame 播放器 API 参考： https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
【讨论】：
嗨！非常感谢您的帮助，您真的让学习 HTML/CSS 成为一种愉快的体验。我真的很感激！好的，所以你的代码几乎可以工作，唯一的问题是进度条在其限制点之后继续（继续到页面的边缘）。你在你的文章中简要提到了这一点，关于它应该如何在一个标记限制的层内......我认为这已经完成了。另外，我将如何使进度条移动得更平滑而不是“块”？ 这很容易：以.progress-bar 样式取出position: fixed; 这可以解决第一个错误。看：lespointscom.com/a/misc/demo/2016_06_19/main1.html
对于第二件事，最好的办法是简化样式的转换：transition: all 1s linear; 该行告诉浏览器“转换”元素的所有样式更改。这就是你需要阻止它变得波涛汹涌！就一行。看：lespointscom.com/a/misc/demo/2016_06_19/main2.html以上是关于将嵌入式 YouTube 视频时间戳同步到自定义进度条的主要内容，如果未能解决你的问题，请参考以下文章