Сохранить только встроенный индикатор и элементы управления на встроенном видео YouTube? - PullRequest
Новая
       35

Сохранить только встроенный индикатор и элементы управления на встроенном видео YouTube?

0 голосов
/ 11 апреля 2020

Я искал способ встроить видео 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>

В моем плеере есть файл. 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.

1 Ответ

0 голосов
/ 11 апреля 2020

В комментариях Вы сказали, что после создания 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

...