0

Есть зацикленное видео-заставка. Интересует вопрос: как в данном случае можно вынести код скрипта js в отдельный файл с расширением .jshtml оставив только подключение), чтобы функционал остался прежним? Фидл

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper #player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="videoWrapper">
  <div id="player"></div>
</div>
<script>
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      playerVars: {
        autoplay: 1,
        playlist: 'VGz0eoTSNZ8',
        loop: 1,
        controls: 0,
        showinfo: 0,
        autohide: 1,
        modestbranding: 1,
        vq: 'hd1080'
      },
      videoId: 'VGz0eoTSNZ8',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 3. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
  }
</script>

6
  • Скопировать всё содержимое внутри тега <script> и вставить его в .js-файл?
    – Regent
    12 июн 2017 в 8:47
  • ну попробуйте прежде чем что-то заявлять - видео сразу исчезает с экрана при таком топорном подходе
    – Вася
    12 июн 2017 в 8:55
  • добавил фидл - jsfiddle.net/kf7hrLgn/2
    – Вася
    12 июн 2017 в 9:01
  • видео сразу исчезает с экрана при таком топорном подходе - на самом деле нет, просто очевидно ты не туда подключал свой новый файл
    – Grundy
    12 июн 2017 в 12:39
  • @Вася я много чего пробовал прежде чем что-то заявлять. Если вы не смогли корректно скопировать код в файл и подключить этот файл на странице - это не во мне проблема, и не повод тут хамить.
    – Regent
    12 июн 2017 в 15:24

1 ответ 1

2

Внутри player.js:

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    playerVars: {
      autoplay: 1,
      playlist: 'VGz0eoTSNZ8',
      loop: 1,
      controls: 0,
      showinfo: 0,
      autohide: 1,
      modestbranding: 1,
      vq: 'hd1080'
    },
    videoId: 'VGz0eoTSNZ8',
    events: {
      'onReady': onPlayerReady
    }
});
}


function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
}

Внутри <your_name>.html:

<script src="path-to-js/player.js"></script>

Или:

<script src="/relative-url-to-assets/js/player.js"></script>

В зависимости от расположения файла и ситуации. Если у вас статические файлы находятся по какому-то url, то используйте второй вариант, слегка модифицировав. Если у вас файл хранится локально, то нужно использовать первый вариант, указав путь до файла относительно текущего расположения .html-файла (aka. relative path).

6
  • в рамках фидла это можете продемонстрировать? jsfiddle.net/kf7hrLgn/2
    – Вася
    12 июн 2017 в 9:01
  • 1
    @Вася, хорошо, подождите секундочку 12 июн 2017 в 9:01
  • 1
    @Вася jsfiddle.net/kf7hrLgn/4 12 июн 2017 в 9:32
  • у меня к вам только вопрос - а зачем вы подключили player_api ?
    – Вася
    12 июн 2017 в 10:48
  • 1
    @Вася, на самом деле все и так работает: jsfiddle.net/kf7hrLgn/5
    – Grundy
    12 июн 2017 в 12:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.