امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.
در اين مطلب از سايت ميرممد نحوه ي استفاده از تگ video در HTML5 رو براتون قرار ميدم.تگ video زماني استفاده ميشه كه بخواييم يك كليپ رو به صورت آنلاين در سايت قرار بديم.حتي زيرنويس هم ميشه به اين قابليت جديد در html 5 اضافه كرد.
كد زير يك تكه كد از تگ video در اچ تي ام ال 5 هست كه در آن از دو كيفيت تصويري mp4 و ogg استفاده شده و همچنين دوتا زيرنويس با زبان انگليسي و نروژي رو هم اضافه كرده :
<video width="320" height="240" controls>
<source src="klip.mp4" type="video/mp4">
<source src="klip.ogg" type="video/ogg">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
فقط كافيه در كد بالا لينك كليپ خودتونه به شكل زير اضافه كنيد :
<source src="لينك ويدئو" type="فرمت ويدئو">
در كد اولي كه قرار دادم از دوتا كد سورس استفاده كردم كه هر كدوم از سورس ها يك فرمت خاصي از همون كليپ هستش شما ميتونيد از چند فرمت با كيفيت هاي متفاوت براي كليپتون استفاده كنيد.
<source src="لينك ويدئو" type="فرمت ويدئو">
<source src="لينك ويدئو با كيفيت دوم" type="فرمت ويدئو دوم">
براي قرار دادن زيرنويس براي كليپتون فقط كافيه لينك زيرنويس رو با تگ track به كد اضافه كنيد به اين شكل :
<track src="لينك زيرنويس" kind="subtitles" srclang="en" label="English">
در كد بالا بخش label متني هستش كه به كاربر براي انتخاب اين زيرنويس نشون داده ميشه چون ممكنه چند زيرنويس اضافه كنيد پس از ليبل هاي مناسب براي هر زيرنويس استفاده كنيد.در بخش srclang بايد كد زبان رو بهش بديم مثلا en براي انگليسي و fa براي زبان فارسي استفاده ميشه.
بخش پايين نيز به ترتيب عرض و ارتفاعي هستش كه به پليرتون ميديد :
width="320" height="240"
يك سري قابليت ديگه هم داره كه بسيار كاربردي هستند و من به صورت موردي با مثال توضيح ميدم.
اگر اتريبيوت autoplay رو به تگ ويدئو اضافه كنيم بعد از لود شدن صفحه كليپ به صورت اتوماتيك شروع به پخش شدن ميكنه.نمونه كد :
<videocontrols autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
اگر اتريبيوت controls رو به تگ ويدئو اضافه كنيم دكمه هاي پلي توقف صدا و... به پلير اضافه ميشه .نمونه كد :
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
اگر اتريبيوت loop رو به تگ ويدئو اضافه كنيم كليپ پس از تموم شدن از دوباره پخش ميشه.نمونه كد :
<videocontrols loop>
<source src="movie.mp4" type="video/mp4">
</video>
اگر اتريبيوت muted رو به تگ ويدئو اضافه كنيم پلير به صورت پيشفرض بيصدا ميشود.نمونه كد :
<video controls muted>
<source src="movie.mp4" type="video/mp4">
</video>
اگر اتريبيوت poster رو به تگ ويدئو اضافه كنيم يك عكس اوليه به پلير ميده.نمونه كد :
<video controls poster="آدرس عكس">
<source src="movie.mp4" type="video/mp4">
</video>
اگر اتريبيوت preload رو به تگ ويدئو اضافه كنيم ويدئو در صفحه لود نميشه تا وقتي كه روي پلي كليك نكيند.به نظر من اين مهمترين اتريبيوت اين تگ هستش چون باعث كم حجم شدن صفحه و لود سريع سايت ميشه.نمونه كد :
<video controls preload="none">
<source src="movie.mp4" type="video/mp4">
</video>
از اين اتريبيوت ها ميشه همزمان استفاده كرد نمونه كد :
<video controls preload="none" poster="آدرس عكس">
<source src="movie.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد
ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.
| این نظر توسطمازیار در تاریخ 4 سال پیش و 6:52 دقیقه ارسال شده است | |||
| من یه اشتباهی کردم زیرنویس رو srt گذاشتم که تصیحش کردم به vtt تبدیلش کردم
مثل ویدیو آپلودش کردم و ازش یک لینک مستقیم گرفتم و درون کد کپی کردم ولی بازم هیچ زیرنویسی به من نشون نداد لطفا یک کد آماده با ویدیو و زیرنویس اگه امکان داره اپلود کنید منم متوجه بشم ممنون پاسخ : سلام
از لینک زیر استفاده کنید : http://www.storiesinflight.com/js_videosub/ موفق باشید. |
|||
