ویدیو (Video)
المان ویدیو (Video) برای نمایش فیلم در صفحه است. ویدیو را داخل تگ <video> می گذاریم. سپس مرورگر آن را پخش می کند. بهتر است چند فرمت بدهیم. چون هر مرورگر، پشتیبانی متفاوتی دارد.
المان ویدیو در HTML
برای نمایش ویدیو از تگ ویدیو استفاده کن. سپس چند منبع بده. مرورگر اولین فرمت قابل پخش را انتخاب می کند.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
مرورگر شما از تگ ویدیو پشتیبانی نمی کند.
</video>
اتوبازپخش (Autoplay) و بی صدا
اتوبازپخش یعنی ویدیو خودکار شروع شود. اما بسیاری مرورگرها جلوی آن را می گیرند. نسخه بی صدا معمولاً اجازه دارد.
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
مرورگر شما از تگ ویدیو پشتیبانی نمی کند.
</video>
نکته: در کرومیوم، اتوبازپخش معمولاً ممنوع است. اما اتوبازپخش بی صدا مجاز است.
کنترل با جاوااسکریپت (JavaScript)
می توانی با DOM ویدیو را پلی، مکث و اندازه را تغییر دهی. دکمه ها رویداد می فرستند.
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<video id="video2" width="480" style="max-width:100%;">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
مرورگر شما از ویدیو پشتیبانی نمی کند.
</video>
<script>
var myVideo = document.getElementById("video2");
function playPause() {
if (myVideo.paused) {
myVideo.play();
} else {
myVideo.pause();
}
}
function makeBig() {
myVideo.width = 600;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 480;
}
<\/script>
راهنمای حرفه ای کوتاه
ابعاد را همیشه بده تا پرش صفحه کمتر شود. متن جایگزین بگذار تا کاربر بی خبر نماند. برای پوشش کامل، چند فرمت بده.
مرتبط با گرافیک و رسانه
اگر گرافیک برداری می خواهی، صفحه بردارهای گرافیکی (SVG) را بخوان. همچنین برای تصویرسازی روی پیکسل ها، بوم نقاشی (Canvas) عالی است. مرور کلی رسانه در رسانه ها (Media) است.
جمع بندی سریع
- برای ویدیو از تگ ویدیو استفاده کن.
- چند منبع بده برای سازگاری بهتر.
- اتوبازپخش بی صدا معمولاً مجاز است.
- ابعاد ثابت بده تا پرش کم شود.