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

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

רשת האינטרנט

איך בונים custom GPT משלכם?

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

בינה מלאכותית

Safeguards על מודל שפה גדול (LLM)

פוסט בשילוב עם פודקאסט וסרטון על ההגנות שאפשר להציב על LLM בסביבת פרודקשן

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

Retry decorator בפייתון

לא מזמן יצא לי לכתוב קוד בפייתון. הקוד משתמש ב-API של openAI ולפעמים ה-API הזה קצת מפשל. הוא מחזיר לי שגיאה ואומר שהגזמתי עם הקריאות,

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