שעשועים עם 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. ואם אתם משתמשים באנימציות – אפשר לשלב אותו כאנימציה.

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

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

עבודה עם GPT למתכנתים

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

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

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

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

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