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

על היתרון של שימוש ב-HTML5 video ולמה זה כל כך חשוב שהוידאו הוא חלק אינהרנטי בדף אינטרנט.

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

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

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


<video autobuffer="true" id="mVideo" width="340" height="260" controls="controls">
<source src="https://internet-israel.com/internet_files/HTML5_demo/movie.ogg" type="video/ogg" />
<source src="https://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. ואם אתם משתמשים באנימציות – אפשר לשלב אותו כאנימציה.