למרות שבתקן העתידי אמורה להיות תמיכה ביכולת הוספת תרגום לסרטון ב-HTML5, נכון לכתיבת מאמר זה שום דפדפן לא תומך ביכולת הזו. אבל למרבה המזל, אפשר להשתמש ב-API של Video tag על מנת ליישם תצוגת תרגום בוידאו בקלות באמצעות JavaScript. הפתרון הטוב ביותר הוא פתרון מבוסס jQuery עם תוסף שנקרא jquery.srt.js.
אני מניח שכל מי שקורא את המאמר הזה מבין מספיק בתגית HTML5 Video ואם לא, תכנסו לקישור ותדעו מספיק. 🙂
ראשית, ניצור את התרגום לסרטון. קל מאד ליצור את התרגום עם תוכנה כמו Subtitle Workshop עבור חלונות או Gnome Subtitles עבור לינוקס. שתי התוכנות מאד קלות לשימוש ואינטואיטיביות מאד.
אחרי שיצרנו את קובץ ה-srt, נעלה אותו לשרת ונזכור את הכתובת. הנה דוגמא לקובץ כזה.
אחרי כן נשתמש בתגית Video כדי ליישם וידאו כלשהו. למשל באופן הבא:
<video controls="controls" width="300">
<!-- if Firefox/Chrome -->
<source src="https://internet-israel.com/internet_files/HTML5_demo/movie.ogg" type="video/ogg" />
<!-- if Safari-->
<source src="https://internet-israel.com/internet_files/HTML5_demo/movie.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the video -->
<p>תעבור לפיירפוקס/כרום/אופרה/אינטרנט אקספלורר 9 אם אתה רוצה לראות את התוכן הזה</p>
</video>
יש להוריד את: jquery.srt.js ולהציב אותו בראש הדף, מיד אחרי התגית של jQuery.
אחרי כן כל מה שנותר זה להגדיר div עם class בשם srt על מנת שיכיל את התרגום וכן לציין את מקור ה-srt בתכונה מיוחדת. למשל:
<div class="srt" data-video="examplevideo" data-srt="https://internet-israel.com/internet_files/HTML5_demo/movie.srt"></div>
ולהפעיל את התוסף באמצעות הקוד הבא:
<script>
$(document).ready(function() { $('.srt').srt(); });
</script>
הסקריפט הזה מפעיל את התרגום עבור כל div שיש לו class של srt. והנה הדוגמא:
אתם מוזמנים להציץ בקוד המקור ולראות מה בדיוק עשיתי אם זה עדיין לא ברור. כך קל ופשוט להוסיף תרגום לכל HTML5 Video, לפחות עד שיהיה פתרון טוב יותר.
