帶有 Javascript 的 HTML5 視頻媒體片段

Question

這里沒有人對我的問題發表評論，但也許這是一個簡單的問題？ 我是編碼新手，我正在嘗試找到一種導航視頻的方法，例如播放前 10 秒然后停止，播放 30-40 秒然后停止，播放第二個 60-30 然后停止等，並有按鈕為了它。 我找到了一個教程，但按鈕沒有響應。 我已經清理了一些代碼（不要認為我刪除了任何必要的東西）並將其粘貼在下面。 教程鏈接： https : //www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/

HTML：

<head>

    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="script.js"></script>

</head>

<body>

<section class="wrapper">

  <div>
    <video id="frag1" controls preload="metadata">

      <source src="assets/disney.mp4"  type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' data-original="assets/disney.mp4">

      <source src="assets/disney.mp4" type='video/webm;codecs="vp8, vorbis"' data-original="assets/disney.mp4">

    </video>
    <nav>
      <button data-start="0">Section One</button>
      <button data-start="6">Section Two</button>
      <button data-start="17">Section Three</button>
    </nav>
  </div>

</section>


</body>

</html>

CSS：

@charset "UTF-8";

#main { width: 85%; margin: 1em auto; }

section>div { margin: 0 1.5% 1.5% 0; padding: 1.5%; float: left; background-color: #efefef; }


video { width: 100%; min-height: 430px; }
button { cursor: pointer; }
nav>button { margin: 0.27em; }
nav>button:first-child { margin-left: 0; }
.wrapper { width: 520px; margin: auto; overflow: hidden; text-align: center; }

.p {
  text-align: center;
  padding-top: 120px;
}

Resources 1×0.5×0.25× Rerun

爪哇腳本：

function mediaFragOne() 
{
var video, sources, nav, buttons;

video = document.querySelector('video#frag1');
sources = video.getElementsByTagName('source');
nav = document.querySelector('video#frag1+nav');
buttons = nav.getElementsByTagName('button');

for(var i = buttons.length - 1; i >= 0; i--) 
{
    buttons[i].addEventListener('click', function() {
            for (var i = sources.length - 1; i >= 0; i--) {
                sources[i].setAttribute(
                    'src', (sources[i].getAttribute('data-original')
                    .concat('#t=' + this.getAttribute('data-start'))));
                    video.load();
                    video.play();
            };
        });
    }
}
mediaFragOne();

Answer 1

當您要單擊多個標簽時，請使用事件委托。

找到所有目標標簽（例如<a> ）共有的祖先標簽（例如<nav> ）。 將祖先標簽注冊到事件。 現在每當祖先標簽或其后代標簽觸發注冊事件時，綁定到祖先標簽的回調函數就會觸發。 所以本質上這是一個無限數量的目標標簽的事件偵聽器。
```
 document.querySelector(ancestor).addEventListener('click', callback);
```
始終讓回調函數傳遞Event Object 。
```
 function callback(event) {...
```
通過引用Event.target確定作為事件源（單擊按鈕、更新視頻時間等）的標簽。
```
 const clicked = event.target
```
在回調函數中，它應該只應用於目標標簽並排除所有其他標簽。
```
 if (clicked.matches('a')) {... ...} return false;
```

演示中評論的詳細信息

 <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <style> :root { font: 400 2.5vw/1.2 Consolas } .vid { display: block; margin: 0 auto; width: 80vw; } .btns { display: flex; justify-content: center; width: 80vw; margin: 0 auto; } a { display: block; margin: 5px 8px; border: 1px solid #000; border-radius: 8px; text-decoration: none; text-align: center; padding: 3px 5px; width: 15vw; } </style> </head> <body> <video class='vid' src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4' controls></video> <nav class='btns'> <a href='#/' data-start='00' data-end='10'>00 - 10</a> <a href='#/' data-start='10' data-end='20'>10 - 20</a> <a href='#/' data-start='20' data-end='30'>20 - 30</a> <a href='#/' data-start='30' data-end='40'>30 - 40</a> </nav> <script> // Declare end let end; // Reference the parent tag of all buttons const btns = document.querySelector('.btns'); // Reference the video const vid = document.querySelector('.vid'); // Register the click event to nav.btns btns.addEventListener('click', frag); // Register the timeupdate event to video.vid vid.addEventListener('timeupdate', stop); // Pass Event Object function frag(event) { // Event.target always points to the clicked button, time-updated video, etc. const clicked = event.target; // if clicked tag is an <a>... if (clicked.matches('a')) { // Get the value of its data-start and convert it to a real number let start = Number(clicked.dataset.start); // Set end to the value of it data-end and convert it to a real number end = Number(clicked.dataset.end); // Set video current time to value of start vid.currentTime = start; // Play video vid.play(); } // End function return false; } // Pass Event Object function stop(event) { // Reference the video const vid = event.target; // if it is a <video>... if (vid.matches('video')) { // and if that video time is currently at or past the value of end... if (vid.currentTime >= end) { // Pause video vid.pause(); } } // End function return false; } </script> </body> </html>

Answer 2

這比你做的要容易。 只需設置currentTime屬性。

未經測試，但這應該讓你開始：

document.querySelector('nav').addEventListener('click', (e) => {
  if (!e.target.matches('[data-start]')) {
    return;
  }
  document.querySelector('video').currentTime = Number.parseFloat(e.target.dataset.start);
});

Answer 3

只是為了詳細說明@Brand 答案，您可以這樣做：

 var vid = document.getElementById("frag1"); // set video to variable var buttons = document.getElementsByTagName("button"); // element collection for (var i = 0; i < buttons.length; i++) { // run for loop buttons[i].addEventListener("click", function() { // add event listenr var dataStart = this.getAttribute('data-start'); // extract start time var dataEnd = this.getAttribute('data-end'); // extract end time var dataDuration = Number(dataEnd - dataStart + '000'); // make the duration will assist on the setTimeOut vid.currentTime = dataStart; // this is the magic vid.play(); window.setTimeout(function(){ vid.pause(); }, dataDuration);// play according to duration }); }

 <section class="wrapper"> <div> <video id="frag1" controls preload="metadata" width="400px"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"> <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogg"> </video> <nav> <button data-start="0" data-end="10">Section One</button> <button data-start="30" data-end="40">Section Two</button> <button data-start="30" data-end="60">Section Three</button> </nav> </div> </section>

您可以在此處和此處找到更多關於此的信息。

希望有幫助。

帶有 Javascript 的 HTML5 視頻媒體片段

問題描述

3 個解決方案

解決方案1
1 已采納 2019-07-21 23:20:57

解決方案2
0 2019-07-21 21:22:45

解決方案3
0 2019-07-21 22:48:08

帶有 Javascript 的 HTML5 視頻媒體片段

問題描述

3 個解決方案

解決方案1 1 已采納 2019-07-21 23:20:57

解決方案2 0 2019-07-21 21:22:45

解決方案3 0 2019-07-21 22:48:08

解決方案1
1 已采納 2019-07-21 23:20:57

解決方案2
0 2019-07-21 21:22:45

解決方案3
0 2019-07-21 22:48:08