HTML5 - имя файла не работает в медиаплеере - PullRequest
Новая
       24

HTML5 - имя файла не работает в медиаплеере

0 голосов
/ 21 декабря 2018

Ладно, есть этот удивительный видеоплеер, который называется plyr.io

. Я был очень впечатлен этим, я скачал его с Github и все, я едва знаю код.Я рано в HTML и CSS.Я ничего не знаю о JavaScript.В любом случае, после его загрузки и всего, я дошел до этой точки. 

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Plyr Demo</title>
<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>
  <style>
  .container {
    max-width: 800px;
    margin: 0 auto;
  }
  .plyr {
    border-radius: 4px;
    margin-bottom: 15px;
  }
  </style>
</head>

<body>
<div class="container">
<video controls crossorigin playsinline 
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
HD.jpg" id="player">
              <!-- Video files -->

            <source 
  src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     720p.mp4" type="video/mp4" size="720">


              <!-- Caption files -->
              <track kind="captions" label="English" srclang="en" 
      src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
    HD.en.vtt"
                  default>
              <track kind="captions" label="Français" srclang="fr" 
     src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     HD.fr.vtt">

              <!-- Fallback for browsers that don't support the <video> 
     element -->
              <a 
      href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
     576p.mp4" download>Download</a>
          </video>


  <script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>



<script  type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
  // This is the bare minimum JavaScript. You can opt to pass no arguments 
  to setup.
  const player = new Plyr('#player');

  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, 
  false);
  }

  // Play
  on('.js-play', 'click', () => {
    player.play();
  });

  // Pause
  on('.js-pause', 'click', () => {
    player.pause();
  });

  // Stop
  on('.js-stop', 'click', () => {
    player.stop();
  });

  // Rewind
  on('.js-rewind', 'click', () => {
    player.rewind();
  });

  // Forward
  on('.js-forward', 'click', () => {
    player.forward();
  });
});

  </script>
  </body>

    </html>

Но когда я на самом деле пытаюсь заменить 

https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
720p.mp4

Всякий раз, когда я заменяю его собственной ссылкой на видео,Видеопроигрыватель просто не работает, я перепробовал так много вещей, и он просто не работал бы, если бы его реальное видео plyr.io

не использовалось свободно, то есть код не нарушает авторские права,скажи мне, если я не прав.ссылка на сайт (https://plyr.io/#video)

1 Ответ

0 голосов
/ 27 декабря 2018

"Всякий раз, когда я заменяю его собственной ссылкой на видео, видеопроигрыватель просто не работает,
Я пробовал так много вещей ..."

  • Сохраняйте ссылку в одну строку ( например: Не разбивайте имя файла с помощью Enter, чтобы поместить текст в новую строку. Никакой новой строкипосле "Трейлер -" текст).

  • Нельзя использовать пустые места, такие как ( см. серую область в тексте ссылки ниже ):

src = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 720p.mp4"

правильная ссылка это: 

src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"

Итак, когда вы говорите (не работает):

Но когда я на самом деле пытаюсь заменить: 

https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer- 
720p.mp4

Правильный путь должен быть:

Но ЭТО РАБОТАЕТ, когда я на самом деле пытаюсь заменить: 

https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4
...