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

הסבר מקיף על וידאו ב-HTML5 עם הדגמות והסבר לפולבק פלאשי באינטרנט אקספלורר 6-8.

תגית 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 שיכול לעבוד בכל מקום – פשוט, לא?

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

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

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