שעשועים עם HTML5 Video Tag

אחד היתרונות הגדולים של תגית וידאו בתקן HTML 5, היא שהיא מתנהגת כמו כל אלמנט של HTML – כלומר אפשר להשפיע עליה עם CSS והיא מהווה אלמנט לכל דבר ב-DOM.

למה זה נחשב כיתרון? מה פירוש? שימו לב למשל לדוגמא הבאה:

איך עשיתי את הדוגמא המופלאה הזו? השתמשתי בתגית וידאו של HTML 5 כררגיל – כך היא נראית:


<video autobuffer="true" id="mVideo" width="340" height="260" controls="controls">
<source src="http://www.internet-israel.com/internet_files/HTML5_demo/movie.ogg" type="video/ogg" />
<source src="http://www.internet-israel.com/internet_files/HTML5_demo/movie.mp4" type="video/mp4" />
This is fallback text to display if the browser does not support the video element.
</video>

ולה הצמדתי את ה-CSS הבא:


#mVideo {
    -webkit-transform: rotate(20deg);
	-mozilla-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-webkit-transform-origin: bottom left;
	-mozilla-transform-origin: bottom left;
	-ms-transform-origin: bottom left;
}

כאשר אני משתמש במודול של CSS3 לבצע את הסיבוב. רוצים עוד דוגמא?

איך זה נעשה? פשוט מאד! לוקחים איזשהו div, צובעים אותו בגרדיאנט (גם עם CSS3) ומציבים אותו 'מתחת' לוידאו שלנו עם z-index וגם זה נעשה על ידי CSS בלבד!


#mVideo2 {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}
#mydiv {
	width: 323px;
	height: 258px;
	position: relative;
	top: -0.8px;
	left: -239px;
	background: -webkit-gradient(linear, right bottom, left bottom, color-stop(0.05, #0678CF), color-stop(0.45, #FAD620), color-stop(0.85, #7E2BC2));
	background: -moz-linear-gradient( right, #0678CF 5%, #FAD620 45%, #7E2BC2 85% );
	background: linear-gradient( right, #0678CF 5%, #FAD620 45%, #7E2BC2 85% );
	z-index: -1;
}

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

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

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

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (7 הצבעות, ממוצע: 3.57 מתוך 5)

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

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

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

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

רן בר-זיק

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

מאמרים אחרונים