در سلسله آموزشهای طراحی سایت آنلاینر به بخش چهارم Event attribute در html پرداختیم.
در این مقاله قصد بررسی embed کردن : video – sound – flash را داریم , و میخواهیم این فایل ها را در صفحه وب خود وارد کنیم.
وارد کردن یک فایل فلش
برای اینکه بتوانید یک فایل فلش را در صفحه وب خود وارد کنید باید قدم به قدم و مرحله به مرحله دستور العمل های زیر را اجرا نمایید.
1- پوشه ای در آدرس ریشه سایت خود با نامی دلخواه ایجاد کنید. این پوشه چون باید حاوی فایل های فلش باشد پس بهتر است نام آن پوشه را flash انتخاب کنید تا فایل های سایت شما مرتب و سازماندهی شوند. میتوانید حتی این پوشه را در کنار صفحه وب خود (لوکال) قرار دهید و پس از گرفتن نتیجه درست آن را توسط FTP به هاست خود منتقل نمایید.
2- فایل فلش خود را در پوشه ایجاد شده قرار دهید. نام فایل فلش را به یاد داشته باشید تا در کد نویسی مجبور به ارجاع دوباره به فایل فلش نشوید در این مثال ما نام فایل را flashhtml.swf قرار میدهیم.نکته دیگر اینکه سعی کنید تا حد امکان حجم فایل فلشی که در صفحه وب استفاده میکنید کم باشد تا در سرعت لود صفحه وب سایت شما تاثیر کمتری داشته باشد. پیشنهاد ما برای اندازه فایل فلش عرض 500 پیکسل و ارتفاع 500 پیکسل است.
3- فایل html صفحه وب خود را باز کرده و مکانی را برای درج فایل فلش خود انتخاب نمایید.در صورت تمایل تگ DIV برای نگهداری این ویدیو در جای مناسب خود ایجاد نمایید.
4- کدهای زیر را در مکان انتخاب شده در صفحه وب خود قرار دهید.
[html]
<object width="500" height="500">
<param name="movie" value="flash/flashhtml.swf">
<embed src="flash/flashhtml.swf" width="500" height="500">
</embed>
</object>
[/html]
5- فایل خود را ذخیره کرده و اجرا نمایید تا نتیجه تمرین خود را مشاهده نمایید.
وارد کردن یک فایل صوتی در صفحه HTML
مواقعی لازم است تا یک فایل صوتی را در صفحه وب خود درج نمایید. به طوری کاربر بتواند به کلیپ صوتی در صفحه وب شما گوش دهد.
به مثال زیر دقت کنید:
[html]
<HTML>
<HEAD>
<TITLE> testing </TITLE>
</HEAD>
<BODY>
<EMBED SRC="aladdin.mid" HIDDEN="true" AUTOSTART="true"
STARTTIME="00:10" ENDTIME="00:30">
</BODY>
</HTML>
[/html]
در مثال بالا آدرس فایل صوتی توسط صفت SRC مشخص میشود.
صفت HIDDEN اگر با مقدار true مقدار دهی شود شیء مورد نظر مخفی خواهد شد و کاربر نمیتواند آن را مشاهده نماید ولی کلیپ صوتی پخش خواهد شد.
صفت autostart اگر مقدار true داشته باشد با لود شدن کامل صفحه کلیپ صوتی شروع به پخش شدن میکند.
صفت starttime نیز مکان شروع به پخش کلیپ صوتی را تعیین میکند . دراین مثال مقدار آن برابر 00:10 قرار داده شده است، این بدین معنی است که فایل صوتی از ثانیه 10 شروع به پخش میکند.
مسلما صفت endtime نیز مکان اتمام کلیپ صوتی را تعیین میکند. مقدار 00:30 در این مثال بدین معنی است که کلیپ صوتی در ثانیه 30 ام به پایان برسد.
صفات دیگری نیز وجود دارد که در این مثال استفاده نشده است. در زیر این صفات توضیح داده شده اند.
VOLUME = این صفت میزان صدا را تعیین میکند.
LOOP=”true”|”false” همانطور که مشاهده میکنید صفت loop با دو مقدار true و false تعیین میشود. اگر مقدار آن true تعیین شود با اتمام کلیپ صوتی اشاره گر آن به اول کلیپ برگشته و دوباره شروع به پخش خواهد کرد. این عملیات تا بستن صفحه وب ادامه میابد.
PLAYCOUNT = و این صفت نیز تعداد دفعات پخش کلیپ صوتی را تعیین میکند. اگر مقدار این صفت را برابر 5 قرار دهیم با پخش 5 دفعه کلیپ صوتی عملیات پخش اتمام میابد.
وارد کردن یک فایل ویدیویی در HTML
برای وارد کردن یک ویدئو به صفحه وب خود راه های متعددی وجود دارند که هر کدام مزیت ها و مشکلاتی نسبت به یکدیگر دارند.
به مثال زیر دقت کنید. برای نشان دادن یک کلیپ ویدئویی در صفحه وب از تگ video استفاده شده است که اولین ایراد آن این است که این تگ در مرور گر های قدیمی قابل به نمایش نیست.
انواع مختلف فایل های ویدئویی با فرمت های مختلف توسط تگ source شناسانده شده است تا در مواقعی که احیانا مرورگری از یک نوع فایل پشتیبانی نکرد فایل های دیگری برای نمایش وجود داشته باشند.
[html]
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
</body>
</html>
[/html]
روش دیگر برای نمایش یک کلیپ ویدئویی این است که از همان روشی که فایل های فلش را در صفحه وب نمایش میدهیم نیز برای نمایش کلیپ ویدئویی نیز استفاده کنیم. از معایب این روش این است که کلیپ تصویری باید به فایل فلش تبدیل شود. ودومین عیب آن این است که مرور گر هایی که فایل های فلش را پشتیبانی نکنند نمیتوانند کلیپ تصویری شما را نمایش دهند.
در آموزش بعد به embedDeprecated tags میپردازیم.
با آنلاینر همراه شوید …
