שילוב תרגום בתגית וידאו ב-HTML5

כך יוצרים תרגום באמצעות תוסף של jQuery וג'אווהסקריפט לסרטון וידאו ב-HTML5

למרות שבתקן העתידי אמורה להיות תמיכה ביכולת הוספת תרגום לסרטון ב-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, לפחות עד שיהיה פתרון טוב יותר.

פוסטים נוספים שכדאי לקרוא

רספברי פיי

הרצת גו על רספברי פיי

עולם הרספברי פיי והמייקרים ניתן לתפעול בכל שפה – לא רק פייתון או C – כאן אני מסביר על גו

רשת האינטרנט

איך בונים custom GPT משלכם?

כך תיצרו בוט משלכם, עם הנחיות ומידע משלכם לכל מטרה – לימודית, תקשורתית או חברתית. כלי מאד חזק שזמין גם ללא קוד.

בינה מלאכותית

להריץ ממשק של open-webui על הרספברי פיי

להפעיל ממשק של צ׳אט ג׳יפיטי שאפשר לגשת אליו מכל מחשב ברשת הביתית על רספברי פיי עם מודל בשם tinydolphin שרץ על רספברי פיי.

גלילה לראש העמוד