home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

การดำเนินการสคริปต์เมื่อ Cue เปลี่ยนในองค์ประกอบ <track> ใน HTML

เมื่อ Cue (จุดกำหนดเวลาใน Track) เปลี่ยนแปลง แอตทริบิวต์ oncuechange จะถูกกระตุ้นใน HTML ทำงานร่วมกับองค์ประกอบ <track>

ไวยากรณ์

<video>
  <track oncuechange="alert('Changed!')">
</video>

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ oncuechange:

<!DOCTYPE HTML>
<html>
  <body>
    <video width="300" height="200" controls autoplay>
      <source src="/html5/foo.ogg" type="video/ogg" />
      <source src="/html5/foo.mp4" type="video/mp4" />
      <track src="subtitles_en.vtt" kind="subtitles" srclang="en" 
             label="English" oncuechange="alert('Changed!')">
      Your browser does not support the video element.
    </video>
  </body>
</html>

การทำงานของ oncuechange

  • เหตุการณ์ oncuechange จะยิงเมื่อ Active Cue ของ Track เปลี่ยนไป
  • เกิดขึ้นเมื่อวิดีโอเล่นและถึงจุดเวลาของ Cue ถัดไป
  • ใช้ได้กับ kind="subtitles", "captions", "descriptions", "chapters", "metadata"

ตัวอย่างปฏิบัติจริง: แสดงคำบรรยายปัจจุบัน

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  <track id="enTrack" src="subtitles_en.vtt" kind="subtitles" 
         srclang="en" label="English" default>
</video>
<div id="currentCue">No active subtitle</div>

<script>
const track = document.getElementById('enTrack');
const display = document.getElementById('currentCue');

track.addEventListener('cuechange', function() {
  const activeCues = track.track.activeCues;
  if (activeCues.length > 0) {
    display.textContent = activeCues[0].text;
  } else {
    display.textContent = 'No active subtitle';
  }
});
</script>

โครงสร้างไฟล์ WebVTT (.vtt)

WEBVTT

00:00:01.000 --> 00:00:04.000
Welcome to this tutorial

00:00:05.000 --> 00:00:09.000
Today we learn about HTML5 video tracks

00:00:10.000 --> 00:00:15.000
The track element supports subtitles, captions, and more

หมายเหตุ: ไฟล์ VTT ต้อง Serve ด้วย MIME type text/vtt และต้องเป็น Same-origin หรือมี CORS header ที่ถูกต้อง