Html 将嵌入的YouTube视频时间戳同步到自定义进度条_Html_Css_Youtube_Timestamp_Embed

Html 将嵌入的YouTube视频时间戳同步到自定义进度条

html css youtube

Html 将嵌入的YouTube视频时间戳同步到自定义进度条,html,css,youtube,timestamp,embed,Html,Css,Youtube,Timestamp,Embed,我今天一直在做的一个项目的一部分被卡住了。任务是同步嵌入youtube视频的时间戳信息，并在页面底部显示与歌曲长度匹配的自定义进度条。以下是到目前为止的布局：因此，基本上，我如何拉恒定的时间戳来更新进度，以及如何设置条的动画以完成视频结尾的100%匹配我已经禁用了用户搜索嵌入的youtube视频的能力。注意：用户也不能使用自定义进度条更改youtube视频的时间（它只是用于视频队列）请让我知道，如果你需要更多的澄清。下面是HTML和CSS。谢谢！！：） HTML>>> <!DOCT

我今天一直在做的一个项目的一部分被卡住了。任务是同步嵌入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 width="850px" height="477px" 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>

喜欢你的问题

使用div切换iframe，并使用

id=“player”

（您想要的任何名称，都可以是“我自己的球员”或“XYZ球员”…）现在，您已经准备好将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
        }
    });
}

就这样！一旦获得了表示getCurrentTime/getDuration的百分比，就不需要为html进度条添加任何其他内容。只需将html条元素的宽度设置为该百分比。只要确保红色的“条”有一个背景（另一个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>

或者看看结果：

IFrame播放器API参考：

嗨！非常感谢您的帮助，您真的让学习HTML/CSS成为一种愉快的体验。我真的很感激！好的，您的代码几乎可以工作，唯一的问题是进度条在其限制点之后继续（继续到页面的边缘）。你在你的文章中简要地提到了这一点，关于它应该如何在一个标记极限的层中……我认为已经完成了。另外，我如何让进度条移动得更平滑一点，而不是“成片”？很简单：取出

position:fixed.progress bar

样式中的code>。看：对于你想要的第二件事，最好是简化样式中的转换：transition:all 1s linear该行告诉浏览器“转换”元素的所有样式更改。这就是你所需要的一切，以阻止它波涛汹涌！就一行。看看：
(player.getCurrentTime()/player.getDuration())*100;

<div id="progress" style="width: 800px; height: 10px; border: 1px solid #fff;">
    <div id="bar" style="width: 1px; height: 10px; background: #f00;"></div>
</div>