با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش چگونگی اضافه کردن یک فایل ویدئو در html بپردازیم. در html 5 این قابلیت وجو دارد که شما می توانید یک فایل ویدئو، با فرمت هایی که توسط html 5 پشتیبانی می شود را در صفحه وب خود قرار دهید. html 5 از فایل های چند رسانه ای با فرمت های : .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. پشتیبانی می کند. فرمت ویدوئی که عموما استفاده می شود و توصیه شده است فرمت MP4 است.
در پست های آموزشی قبلی html، ما به آموزش مباحث چگونگی کار با تگ های Table , Div ، تگ img ، تعریف رنگ ها در html و تعریف فرم ها در html پرداختیم. در ادامه این پست به چگونگی کار با ویدئو در html خواهیم پرداخت.
مثال کامل از ویدئو در html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <p> Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. </p> </body> </html> |
قبل از HTML5، یک فایل ویدئو در html ، فقط می توانست در یک مرورگر با یک افزونه (مانند فلش) پخش شود. تگ <video> یک روش استاندارد برای جاسازی ویدیو در یک صفحه وب را مشخص می کند. برای نمایش ویدئو در html از تگ <video> استفاده کنید.
مثال:
1 2 3 4 5 | <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> |
تشریح عملکرد مثال فوق:
ویژگی control در تگ <video>، دکمه های کنترلی ویدئو را نظیر : play, pause, and volume را اضافه می کند. ایده خوبی است که همیشه ویدئو شامل ویژگی های عرض (width) و ارتفاع (height) باشد.چراکه اگر ارتفاع و عرض تنظیم نشود، ممکن است صفحه هنگام بارگیری ویدیو، سوسو زده شود. تگ <source> به شما این امکان را می دهد که نام ویدئو و فرمت آن را برای مرورگر مشخص کنید.
در html 5 شما می توانید. فایل ویدئو را با استفاده از ویژگی autoplay، به حالت پخش خودکار تبدیل کنید.
مثال:
1 2 3 4 5 | <video width="320" height="240" autoplay> <"source src="movie.mp4" type="video/mp4> <"source src="movie.ogg" type="video/ogg> Your browser does not support the video tag. </video> |
نکته : ویژگی Autoplay در دستگاه های تلفن همراه مانند iPad و iPhone کار نمی کند.
در HTML5، ۳ فرمت ویدئو هایی که پشتیبانی می شود شامل: MP4، WebM، و Ogg می باشد.
پشتیبانی مرورگر برای فرمت های مختلف:
مرورگر | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (from Opera 25) | YES | YES |
فرمت فایل | نوع چندرسانه ای |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 متدهای DOM، خواص ها و وقایع را برای عنصر <video> تعریف می کند.
این اجازه می دهد تا فیلم ها را بارگیری، پخش و مکث کنید، همچنین مدت زمان و حجم را نیز تنظیم کنید.
همچنین رویدادهای DOM وجود دارد که می توانند به شما اطلاع دهند هنگامیکه یک ویدیو شروع به پخش میکند، متوقف شده است و…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> <html> <body> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script> var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> <p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p> </body> </html> |
تگ | توضیحات |
---|---|
<video> | یک ویدئو یا فیلم را تعریف می کند. |
<source> | منابع رسانه چندگانه را برای عناصر رسانه ای تعریف می کند، مانند <video> و <audio> |
<track> | آهنگ های متن را در پخش کننده های رسانه تعریف می کند. |
امروزه در میان محتوای چندرسانه ای در وب سایت ها، ویدئو ها و فیلم ها به عنوان یکی از پرکاربردترین محتواها در وب سایت های جهان استفاده می شوند. که کاربردهای مختلفی از جمله آموزشی، علمی، سرگرمی و… دارند. که برای این منظور باید با چگونگی اضافه کردن ویدئو در HTML مطابق مباحث فوق آشنایی داشته باشید.
زهرا
سلام، ممنون برای مقاله عالی که تهیه کردید
آیا راهی وجود دارد که بتونیم امکان دانلود یک فیلم با کیفیت های مختلف رو به تگ video اضافه کنیم؟
همچنین راهی وجود دارد که بدون استفاده از جاواسکریپت، بشه سرعت پخش مختلف برای تگ video تعریف کرد؟
متشکرم
پی وی لرن
با سلام
برای هر ویدیو یا هر کیفیت باید از یک تگ ویدیو استفاده کنید.
برای سرعت ویدیو فکر نمی کنم خارج از جاوااسکریپت امکان پذیر باشد برای خود تگ های html این امکان وجود ندارد.
سارا
سلام ببخشید میخواستم بپرسم که آیا راهی هست که وقتی ویدیو بهش autoplay اضاف میکنیم به صورت خودکار دانلود نشه؟ینی فقط لود شه دانلود نشه
پی وی لرن
با سلام
اگر اشتباه نکنم یک حالت دیگه هم با نام autoload وجود دارد که فایل را فقط لود می کند.
mardin
ببخشید میشود ویدیو های اپارات را در سایت گذاشت
امیرحسین
بله.میتونید با این کار رو انجام دهید
امیرحسین
بله.میتونید با
computerbaman.ir
بله.میتونید با تگ video