ניסוי #34: המרת כתוביות SRT לפורמט ווב (WEBVTT)

הפוסט נכתב על-די שקד דלריאה, מפתח מוכשר אותו הדרכתי בקורס אפליקציות ווב בבאר-שבע.
הקורס מתקיים מטעם עמותת תפוח הפועלת לצמצום הפערים החברתיים באמצעות הנגשת המידע והטכנולוגיה.

מטרת הניסוי

להמיר כתוביות מפורמט SRT (הנפוץ כיום להורדה),
לפורמט WEBVTT, על-מנת להציגם כחלק מהתגית <video>

Screen Shot 2015-09-22 at 11.06.29

הציוד הדרוש

עורך טקסט, דפדפן נתמך.

רקע

כיצד מציגים ווידאו?

<video src="VIDEO.mp4" type="video/mp4"></video>

כיצד מציגים כתוביות?

<track kind="subtitles" src="SUBTITLES.vtt" default></track>

באיזה פורמט יש לשמור את הכתוביות?

בפורמט VTT.

מהו הפורמט הנפוץ כיום להורדת כתוביות?

פורמט SRT.

מהו ההבדל בין WEBVTT ו-SRT?

WEBVTT
1	WEBVTT
2
3	00:00:11.000 --> 00:00:13.000
4	We are in New York City
SRT
1	00:00:11,000 --> 00:00:13,000
2	We are in New York City

מהלך הניסוי

index.html

<html>
  <head>
  </head>
  <body>
     <video id="vid" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" controls>
       <track id="subs" kind="subtitles" src="" default>
     </video>
    <h1>Choose subtitles</h1>
    <div id="subs-input">
      <input type="file" id="subs-file">
      <button id="load-subs">Load Subtitles</button>
    </div>
    <script src="script.js"></script> 
  </body>
</html>

script.js


עם לחיצה על הכפתור:

document.getElementById("load-subs").onclick = function() {
  ...
}


ניצור FileReader באמצעותו נקרא את
קובץ הכתוביות:

...
var r = new FileReader();
...


נשמור במשתנה file את
תוכן קובץ הכתוביות:

...
var file = document.getElementById("subs-file").files[0];
...


עם סיום טעינת קובץ הכתוביות:

r.onload = function(e) {
  ...
};


נשמור את תוכן הקובץ במשתנה:

...
var content = e.target.result;
...


בהתאם לנדרש בפורמט WEBVTT, נוסיף כותרת ורווח של 2 שורות לפני תחילת הטקסט:

...
content = "WEBVTT" + "\n" + "\n" + content;
...


בהתאם לנדרש בפורמט WEBVTT, נחליף פסיקים "," בנקודות ".":

...
content = content.replace(/,/g, ".");
...


ניצור BLOB בקידוד UTF-8:

...
blob = new Blob([content], {
  type : "application/octet-stream",
  encoding: "UTF-8"
});
...


נשנה את המאפיין src של התגית <track>:

...
  document.getElementById("subs").setAttribute("src", URL.createObjectURL(blob));
};


נפעיל את טעינת קובץ הכתוביות:

...
  r.readAsText(file, "utf-8");
};
...

תוצאות הניסוי:

http://www.mcterano.com/blog/tutorials/714
בחרו קובץ כתוביות בפורמט SRT, לחצו על Load Subtitles ונגנו את הסרט.