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

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"

正確的鏈接是：

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 個解決方案

解決方案1
0 2018-12-27 12:30:19

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

問題描述

1 個解決方案

解決方案1 0 2018-12-27 12:30:19

解決方案1
0 2018-12-27 12:30:19