html - 将嵌入式YouTube视频时间戳同步到自定义进度栏-6ren

html - 将嵌入式YouTube视频时间戳同步到自定义进度栏

转载作者：行者123 更新时间：2023-12-03 05:29:08

我陷入了今天一直在从事的项目的一部分。该任务是同步嵌入的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>

和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;
            }

最佳答案

爱你的问题!

使用带有id="player"的div切换iframe(任意名称，它可以是“my_own_player”或“XYZ_player” ...)
然后，您已经准备就绪，可以将iframe播放器转换为Youtube播放器对象，以便使用“IFrame播放器API”完成所需的操作。

确保以与iframe相同的方式设置div的样式。

只需添加以下脚本:

//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
        }
    });
}

用您的视频ID替换videoId。

用视频的高度替换height。

用视频的宽度替换width。

现在，按照您的要求获取 “视频时间戳” ，以便使进度条变得容易。播放器对象有两种方法可以做到这一点:

getCurrentTime()

getDuration()

getDuration是视频的总时间(以秒为单位)。 getCurrentTime是视频播放的时间。划分 getCurrentTime乘 getDuration，您将获得进度条的比率。将其乘以100，即可得到所需的百分比:

(player.getCurrentTime()/player.getDuration())*100;

而已!一旦获得代表 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>

请，只需尝试修改后的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 - 将嵌入式YouTube视频时间戳同步到自定义进度栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37904499/

文章推荐： gradle - 在一个任务中调用多个gradle任务

文章推荐： php - 如何获得特定的 YouTube 评论？

文章推荐： android - 找不到类android.permission.INTERNET ionic /Android

文章推荐： html - YouTube 嵌入动态大小与最小和最大大小

youtube - 如何从 Youtube 视频禁用右键单击选项和 youtube 水印标志
是否有任何解决方案来禁用右键单击选项并从 Youtube 视频中删除右下角水印 Logo ？我在搜索 GOOGLE 后尝试过。谁能告诉我？谢谢你。最佳答案试试 modestbranding范围:
youtube - 使用 YouTube API 仅在 YouTube 上搜索音乐轨道
我想使用 YouTube API (v3) 来启用仅音乐轨道的搜索(没有猫或藤蔓或任何其他非音乐视频)。我查看了 API Explorer 和文档以获取有关该问题的任何指示，但找不到任何有用的信息。
youtube - YouTube maxresdefault缩略图
我需要为网站使用YouTube视频缩略图的maxresdefault版本，但是在开发实现此目的的代码后，我发现并非所有视频都具有这些缩略图，尽管这些视频均为1080p。有没有一种方法可以自动为我的所
youtube - Youtube iframe没有嵌入我的网站？
我想通过“iframe”嵌入youtube视频，但YouTube在我国禁止使用，建议我如何在我的网站上嵌入视频! [1]:以下图片显示了在我的国家/地区无法访问youtube 最佳答案该视频将被嵌入
youtube - YouTube iframe自动播放嵌入
我正在为myBB使用一个名为Profile Music Plugin的插件，可以在此处找到http://community.mybb.com/mods.php?action=view&pid=75 我
youtube - Youtube iframe功能可在youtube视频结尾打开网站
Youtube IFRAME API中是否有可以执行命令的功能，例如在播放的视频结尾处打开网站？ (我相信有一个功能可以在旧的Java API下执行此操作，但该功能已于去年弃用。) 最佳答案您可以引
youtube - YouTube API设置尺寸
我试图在Videos.insert和Videos.update查询中设置3d尺寸标志。但是标志不会改变。更新查询示例: 请求: PUT https://www.googleapis.com/yout
youtube - YouTube API如何获得评论和喜欢的回复
使用此获取评论评论主题:列表 GET https://www.googleapis.com/youtube/v3/commentThreads?part=snippet { "error": {
youtube - YouTube OEmbed服务不适用于带有播放列表和索引查询参数的视频网址
最近，我尝试使用OEmbed服务通过播放列表查询参数获取视频网址的iframe代码，但是OEmbed为我们提供了与我要求的视频不同的iframe代码。这是带有播放列表查询参数的视频网址: https
youtube - YouTube API搜索出现问题
我正在使用此代码: https://www.googleapis.com/youtube/v3/search?q=global+warming&part=id&maxResults=50&key=MY
youtube - YouTube-ScheduledStartTime有什么影响？
我有一个LiveBroadcast，并且将来会添加一个scheduledStartTime。据我所知，这次测试不会对LiveBroadcast的整体状态产生影响，即广播是否具有准备就绪/测试的life
youtube - YouTube API是否支持在特定时间后关闭浏览器的参数？
YouTube API是否支持在特定时间后关闭浏览器的参数？这需要使用链接在不同位置共享来推广促销视频。视频播放结束后关闭浏览器。最佳答案您可以使用Youtube API监控视频是否播放完毕，然
youtube - YouTube Player无法与Android透明面板菜单一起使用
如果没有表单上的透明面板，YouTube Player将可以正常播放视频，或者可以全屏播放视频，透明面板中有一些图像没有什么特别的。如果我取出透明面板，则YouTube播放器会按需工作，并嵌入到应用程
youtube - youtube analyticsService报告参数
我正在通过Google进行身份验证，以尝试获取YouTube分析数据，但我的问题是我不知道在查询YouTube时如何向您填充参数在这里，我正在提供一项新服务:然后尝试查询它我不确定要在“ids”参
youtube - YouTube:自定义嵌入
我想添加youtube视频列表，但不添加视频播放器。所以我需要的是视频标题视频缩略图视频时长我以某种方式设法通过使用此http://img.youtube.com/vi/4wew2uWoARw
youtube - youtube gdata获取视频文件的大小
我正在使用youtube api和python库gdata 我遵循了文档，但似乎没有出路。问题是 - How do i get the size of the youtube video fil
youtube - YouTube:如何获得喜欢或评论视频的用户列表？
使用Youtube API，我如何获得评论或顶过youtube视频的用户ID /处理列表？提前致谢最佳答案在这里，您可以了解如何使用YouTube API v2(v3尚不支持此注释)获取评论:h
youtube - YouTube:获取以后观看的商品数量
我正在为所有相关数据构建一个仪表板(以php为单位)，我还想在YouTube“稍后观看”播放列表中显示我的商品数量。我知道无法使用YouTube API来解决这个问题，但是也许有人想出一种解决方法？
youtube - Youtube Api搜索结果出现引号错误
我尝试使用YouTube API，但存在引号问题。 SearchResource.ListRequest searchListRequest = yt.Search.List("sni
youtube - YouTube:有什么方法可以获取用户观看的视频列表？
我想为我的Android应用程序的用户构建视频推荐器。我有Google OAuth可以登录我的应用程序。我可以获取有关我的应用程序用户在YouTube上观看的视频的数据吗？最佳答案 v3 API分为

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 将嵌入式YouTube视频时间戳同步到自定义进度栏