HTML5 – תגית וידאו שעובדת בכל הדפדפנים

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

הבעיה היא שנכון לכתיבת מאמר זה, יש חוסר הסכמה על נושא הקידוד. אינטרנט אקספלורר 9, ספארי וכרום תומכות בקבצי MP4 בקידוד H.264. פיירפוקס ואופרה בגרסת חלונות תומכות בפורמטים אחרים (ביניהן אפשר למנות את VP8 ואת ogg). למרות שמסתמן שבסופו של דבר פיירפוקס יתמוך ב-MP4, בשלב זה אנחנו צריכים לקודד את הוידאו שלנו בשני אופנים – MP4 ו-ogg.

חמושים בתובנה המתבקשת בנוגע לקידוד, בואו וניצור וידאו! הנה דוגמא פשוטה מאד:

תעבור לפיירפוקס/כרום/אופרה/אינטרנט אקספלורר 9 אם אתה רוצה לראות את התוכן הזה

ואיך הפלא הקטן הזה קורה? באמצעות הקוד המאד פשוט הבא:


<video controls="controls" width="500">  
    <!-- if Firefox/Chrome -->  
    <source src="movie.ogg" type="video/ogg" />  
    <!-- if Safari-->  
    <source src="movie.mp4" type="video/mp4" />  
    <!-- If the browser doesn't understand the video -->  
	<p>תעבור לפיירפוקס/כרום/אופרה/אינטרנט אקספלורר 9 אם אתה רוצה לראות את התוכן הזה</p>
</video>

כמובן שלא חייבים לשים הערה מעליבה לאלו שיש להם אינטרנט אקספלורר שקודם ל-9, אפשר לשים להם נגן פלאש שמנגן קובץ flv – נסו לפתוח את הדף הזה באמצעות אקספלורר מגרסה 8 ומטה:

למי שלא יודע איך להכין נגן פלאש אפשר להשתמש בפתרונות מוכנים או להעזר במדריך להכנת נגן פלאש. הקוד נראה כך:


<video controls="controls" width="500">  
    <!-- if Firefox/Chrome -->  
    <source src="movie.ogg" type="video/ogg" />  
    <!-- if Safari-->  
    <source src="movie.mp4" type="video/mp4" />  
    <!-- If the browser doesn't understand the video -->  
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
        width="300"
        height="255"
        align="middle"
        id="main">
	    <param name="allowScriptAccess" value="sameDomain" />
	    <param name="movie" value="fplayer.swf" />
	    <param name="quality" value="high" />
	    <param name="bgcolor" value="#ffffff" />
	    <param name="FlashVars" value="skin=fskin.swf&flv=movie.flv" />
	    <embed src="fplayer.swf"
	           width="300"
	           height="255"
	           autostart="false"
	           quality="high"
	           bgcolor="#ffffff"
	           FlashVars="skin=fskin.swf&flv=movie.flv"
	           name="main"
	           align="middle"
	           allowScriptAccess="sameDomain"
	           type="application/x-shockwave-flash"
	           pluginspage="http://www.macromedia.com/go/getflashplayer" />
		</object>    
</video>  

תכונות של תגית וידאו

לתגית וידאו יש מספר תכונות שבאמצעותן אפשר לקבוע כל מני דברים.

video controls=video controls

באמצעות תכונה זו אנו יכולים לקבוע שיהיו בקרים (כפתור play וכפתור ווליום למשל).

audio=muted

באמצעות תכונה זו אנו יכולים לקבוע שהווליום הדיפולטיבי יהיה מושתק. המשתמש יוכל להרים את הווליום בכל שלב שהוא.

autoplay=autoplay

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

loop=loop

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

preload=preload

טעינה מראש של הסרט, עוד לפני שהמשתמש לחץ על play. כמובן שהתגית הזו לא רלוונטית אם אנו משתמשים ב-autoplay

width & height

באמצעות תכונות אלו אנו יכולים לקבוע את הגובה והרוחב של הוידאו. אפשר ואף רצוי להשתמש ב-CSS בשביל זה.

זה הכל בכל מה שנוגע לוידאו ב-HTML5 שיכול לעבוד בכל מקום – פשוט, לא?

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: , פורסם בקטגוריה: HTML 5

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.