אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » HTML 5 » שילוב תרגום בתגית וידאו ב-HTML5

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

רן בר-זיק ינואר 25, 2011 8:01 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
»contenteditable ו-localStorage ב-HTML5
»HTML 5 Notification
HTML 5 וידאו באתר אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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