Question

好的，所以有个叫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）

Answer 1

”“只要我将其替换为自己的视频链接，视频播放器只是不起作用，
我已经尝试了很多东西...”

将链接保留为一行（例如：不要用Enter来破坏文件名，以在新行中添加一些文本。“ Trailer-” 文本）。
您不能有空格（例如请参见链接下方文字的灰色区域）：

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

correct link是：

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

HTML5-文件名在媒体播放器中不起作用

1 个答案: