时间戳

首页 > 解决方案 > 仅在嵌入的 YouTube 视频上保留进度条和控件？

javascript - 仅在嵌入的 YouTube 视频上保留进度条和控件？

问题描述

几个小时以来，我一直在寻找一种将 YouTube 视频作为音频播放器嵌入的方法，但我没有运气。我发现主要有 3 个选项： 1. 将 iframe 的高度设为 25px，但我真的很讨厌它的外观。2. 使用播放和暂停按钮，但这样我没有进度条。3. 我在某处读到，您只能隐藏视频，但使用 css 保留控件，但我无法做到这一点。

有人可以告诉我一种方法吗？

编辑：我有一个可能的解决方案，但我有一个问题。代码如下：

<html>
  <head>
    <style>
      iframe{
        height:0;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="playeroptions.js"></script>
  </head>
  <body>
    <audio id="player2" preload="none" controls>
      <source src="https://www.youtube.com/watch?v={{id}}" type="video/x-youtube">
    </audio>
  </body>
</html>

在我的 playeroption.js 文件中，我有这个：

$(document).ready(function(){
  $('audio').mediaelementplayer();
});

在我的站点中，我无法按下音频播放器中的任何按钮。我怎样才能解决这个问题？PS我收到以下错误：

Refused to execute script from 'http://127.0.0.1:8000/player/9XvXF1LrWgA/playeroptions.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

标签： javascripthtmlcssyoutubeembed

解决方案

在评论中您说将 iframe 做得非常小后，视频仍然可见。这是因为视频将始终按比例缩小/放大到其播放器大小。解决方法是让玩家非常高。YT 播放器将保持视频的纵横比，因此我们最终会出现黑条以及底部和顶部。然后绝对它在父 div 中，隐藏它之外的东西，现在我们只有黑色背景的控件。

CSS：

.player {
  width: 500px;
  height: 35px;
  overflow: hidden;
  position: relative;
}

.player iframe {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2000px;
  border: none;
}

HTML：

<div class="player">
   <iframe src="https://www.youtube.com/embed/F4jYWOqHPEA?autoplay=1"></iframe>
</div>

小提琴：https ://jsfiddle.net/8h71453t

推荐阅读