سبد (0)

پخش ویدئو در HTML

  • پخش صدا در HTML

    18 شهریور 1397

    صداها در HTML به روش های مختلفی می توانند پخش شوند.

    مشکلات و راه حل های پخش صدا در وب

    Wiki

    اجرای صدا در HTML کار آسانی نیست!

    باید ترفند های زیادی برای اینکه مطمئن شوید فایل صوتی شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

    در این فصل مشکلات و راه حل هایی موجود به طور خلاصه بیان شده است.

    پخش صدا با استفاده از Pluginها

    Wiki

    Plugin یک برنامه کامپیوتری کوچک است که قابلیت های استاندارد مرورگرهای وب را گسترش می دهد. Pluginها برای اهداف مختلفی می توانند استفاده شوند. آنها می توانند برای پخش موزیک، نمایش نقشه، تأیید شناسه کاربری بانکی، کنترل ورودی ها کاربر و... بکار روند.

    Pluginها را می توان با استفاده از تگ های <object> یا <embed> به صفحات HTML اضافه نمود.

    پخش صدا با استفاده از عنصر <embed>

    Wiki

    هدف از تگ <embed> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <embed height="50px" width="100px" src="/horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <embed>

    • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.

    پخش صدا با استفاده از عنصر <object>

    Wiki

    هدف از تگ <object> درج کردن عناصر multimedia در صفحات HTML است.

    قطعه کد زیر یک فایل MP3 را در صفحه وب درج می کند.

    مثال (پخش صدا در HTML)

    <object height="50px" width="100px" data="horse.mp3" />
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <object>

    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، audio پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.

    پخش صدا با استفاده از عنصر <audio>

    Wiki

    عنصر <audio> یک عنصر در HTML 5 می باشد، برای HTML 4 شناخته شده نیست اما در همه مرورگرهای جدید کار می کند.

    مثال (پخش صدا در HTML)

    <audio controls="controls">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    Your browser does not support this audio
    </audio>
    خودتان امتحان کنید »

    مشکلات استفاده از عنصر <audio>

    Wiki

    • فقط فرمت های Ogg و MP3 و Wav و Vorbis قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
    • عنصر <audio> در مرورگرهای قدیمی شناخته شده نیست.
    • عنصر <audio> در HTML4 و XHTML معتبر نیست.
    مرورگر Ogg Vorbis MP3 WAV
    FireFox 4 beta ✓ ✓ ✓

    Safari 4

    		 ✓ ✓ --

    Chrome 3 (beta)

    		 ✓ ✓ --

    Opera 10 (beta)

    		 ✓ -- ✓
     IE 8 -- -- --

    بهترین راه حل برای پخش صدا در HTML

    Wiki

    مثال (پخش صدا در HTML)

    <audio controls="controls" height="50px" width="100px">
      <source src="/horse.mp3" type="audio/mpeg" />
      <source src="/horse.ogg" type="audio/ogg" />
    <embed height="50px" width="100px" src="/horse.mp3" />
    </audio>
    خودتان امتحان کنید »

    مثال بالا از دو فرمت متفاوت استفاده می کند. در HTML 5 عنصر <audio> سعی می کند تا ویدئو را با یکی از فرمت های ogg یا mp3  پخش کند. اگر این روش جواب نداد، بخش ویدئو به عنصر <embed> واگذار می گردد. اگر این روش هم جواب نداد، خطایی نمایش داده می شود.

    مشکلات

    Wiki

    • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
    • عنصر <audio> در HTML 4 و XHTML وجود ندارد.
    • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

    نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.

    Yahoo Media Player - آسانترین راه برای اضافه کردن Audio به سایت

    Wiki

    ساده ترین راه برای اضافه کردن Audio به صفحات وب چیست؟ بطور قطع Yahoo Media Player که به صورت رایگان است، می تواند یک گزینه باشد.

    Yahoo Media Player فایل های mp3 و دیگر فرمت ها را پخش می کند. شما می توانید آنرا به صفحه (یا بلاگ) خودتان با یک خط دستور اضافه کنید و به راحتی صفحه HTML خود را به یک پخش کننده موزیک حرفه ای تبدیل کنید.

    مثال (پخش صدا در HTML)

    <a href="/song.mp3">Play Song</a>

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
    </script>
    خودتان امتحان کنید »

    استفاده از player یاهو رایگان است. برای استفاده از آن کد JavaScript زیر را در پایین صفحه وب خود درج کنید.

    <script src="http://mediaplayer.yahoo.com/js"></script>

    سپس به سادگی توسط تگ <a> به فایل های mp3 خود در HTML اتصال برقرار نمایید. کد JavaScript به صورت اتوماتیک برای هر آهنگ یک دکمه پخش ایجاد می کند. گرچه، هنگامی که روی دکمه کلیک می کنید، یک پخش کننده بزرگ پایین صفحه ظاهر می شود.

    <a href="/song1.mp3">Play Song 1</a>
    <a href="/song2.mp3">Play Song 2</a>
    ...
    ...
    ...

    توجه داشته باشید که پخش کننده همیشه در پایین صفحه وجود دارد. کافیست روی آن کلیک کنید تا ظاهر شود.

    استفاده از تگ <a>

    Wiki

    اگر صفحه وبی دارای یک لینک به فایل مدیایی باشد، اکثر مرورگرها از یک "برنامه کمکی" برای پخش فایل استفاده می کنند.

    قطعه کد زیر یک لینک به یک فایل MP3 را نشان می دهد. اگر کاربری روی این لیک کلیک کند، مرورگر از یک "برنامه کمکی" برای پخش استفاده می کند.

    مثال (پخش صدا در HTML)

    <a href="/horse.mp3">Play the song</a>
    خودتان امتحان کنید »

    یک نکته در مورد صداهای Inline

    Wiki

     هنگامی که صدایی در یک صفحه وب قرار داده می شود و یا بخشی از آن می شود، صدای Inline می نامند.

    اگر قصد دارید از صداهای Inline در وب خود استفاده کنید، بدانید که بعضی از مردم صداهای Inline را مزاحم می دانند. همچنین توجه داشته باشید که بعضی کاربران گزینه صداهای Inline را در مرورگرشان خاموش کرده اند.

    بهترین پیشنهاد ما به شما این است که تنها زمانی از صداهای Inline در صفحات وب استفاده کنید که کاربر انتظار دارد صدایی را بشنود. مثالی در این مورد صفحه ای است که کاربر با کلیک روی لینکی می خواهد مورد ضبط شده ای را بشنود.

    تگ های Multimedia در HTML

    Wiki

    Tag Description
    <embed> یک عنصر multimedia در صفحات HTML درج می کند
    <object> یک عنصر multimedia در صفحات HTML درج می کند
    <param>

    یک پارامتر برای object تعریف می کند
    <audio>

    صدا را در صفحات HTML درج می کند (تگ جدید در HTML5)
    <video>

    یک ویدئو یا فیلم در صفحات HTML درج می کند. (تگ جدید در HTML5)
    <source>

    در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود. (تگ جدید در HTML5)
    <track>

    در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود. (تگ جدید در HTML5)
    READ MORE

  • پخش ویدئو در HTML

    17 شهریور 1397

    ویدئوها در HTML به روش های مختلفی می توانند نمایش داده شوند.

    پخش ویدئوها در HTML

    Wiki

    مثال (پخش ویدئو در HTML)

    <video width="320" height="240" controls="controls">
      <source src="/movie.mp4" type="video/mp4" />
      <source src="/movie.ogg" type="video/ogg" />
      <source src="/movie.webm" type="video/webm" />
      <object data="movie.mp4" width="320" height="240">
        <embed src="/movie.swf" width="320" height="240" />
      </object>
    </video>
    خودتان امتحان کنید »

    مشکلات و راه حل ها

    Wiki

     نمایش ویدئو در HTML ساده نیست! 

    باید ترفند های زیادی برای اینکه مطمئن شوید ویدئو شما در تمام مرورگرها (Internet Explorer, Chrome, Firefox, Safari, Opera) و تمامی سخت افزارها (PC, Mac , iPad, iPhone) اجرا شود به کار ببرید.

    در این فصل مشکلات و راه حل هایی موجود به طور خلاصه بیان شده است.

    پخش ویدئو با استفاده از تگ <embed>

    Wiki

    هدف از تگ <embed> درج عناصر مولتی مدیا در صفحات HTML می باشد.

    قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

    مثال (پخش ویدئو در HTML)

    <embed src="/intro.swf" height="200" width="200"/>
    خودتان امتحان کنید »

    مشکلات استفاده از تگ <embed>

    Wiki

    • تگ <embed> در HTML 4 شناخته شده نیست. صفحه شما دارای اعتبار نمی باشد.
    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
    • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

    پخش ویدئو با استفاده از تگ <object> 

    Wiki

    هدف از تگ <object> درج عناصر مولتی مدیا در صفحات HTML است.

    قطعه کد HTML زیر یک فایل Flash را در صفحه وب درج می کند:

    مثال (پخش ویدئو در HTML)

    <object data="intro.swf" height="200" width="200"/>
    خودتان امتحان کنید »

    مشکلات استفاده از تگ <object>

    Wiki

    • اگر مرورگر فرمت فایل شما را پشتیبانی نکند، فایل Flash پخش نخواهد شد.
    • اگر فرمت فایل را به فرمتی دیگر تبدیل کنید، باز هم در همه مرورگرها پخش نخواهد شد.
    • iPad و iPhone نمی توانند فایل های Flash را نمایش دهند.

    پخش ویدئو با استفاده از تگ <video>

    Wiki

    تگ <video> در HTML5 یک عنصر جدید می باشد.

    با استفاده از تگ <video> می توانید فایل های ویدئو را در صفحات HTML پخش کنید.

    قطعه کد زیر، با توجه به نوع مرورگر کاربر، یکی از فرمت های ogg، mp4 یا webm را در صفحه وب پخش می کند:

    مثال (پخش ویدئو در HTML)

    <video width="320" height="240" controls="controls">
      <source src="/movie.mp4" type="video/mp4" />
      <source src="/movie.ogg" type="video/ogg" />
      <source src="/movie.webm" type="video/webm" />
    Your browser does not support the video tag.
    </video>
    خودتان امتحان کنید »

    مشکلات استفاده از تگ <video>

    Wiki

    • فقط فرمت های Ogg و MP4 و Webm قابل پشتیبانی است و باید یک ویدئو را مانند مثال بالا به چند فرمت تبدیل کنید.
    • عنصر <video> در مرورگرهای قدیمی شناخته شده نیست.
    • عنصر <video> در HTML4 و XHTML معتبر نیست.

    بهترین راه حل پخش ویدئو در HTML

    Wiki

    HTML 5 + object + embed

    <video width="320" height="240" controls="controls">
      <source src="/movie.mp4" type="video/mp4" />
      <source src="/movie.ogg" type="video/ogg" />
      <source src="/movie.webm" type="video/webm" />
      <object data="movie.mp4" width="320" height="240">
        <embed src="/movie.swf" width="320" height="240">
        Your browser does not support video
        </embed>
      </object>
    </video>
    خودتان امتحان کنید »

    مثال بالا از چهار فرمت متفاوت ویدئویی استفاده می کند. عنصر <video> در HTML 5 سعی به نمایش یکی از ویدئوها، با فرمت های mp4 ،ogg یا webm دارد. اگر نتواند، عنصر <object> را امتحان می کند. اگر این نیز جواب نداد، به عنصر <embed> برگشت داده می شود.

    مشکلات

    Wiki

    • باید ویدئو ها را به فرمت های زیادی تبدیل کنید.
    • عنصر <video> در HTML 4 و XHTML وجود ندارد.
    • عنصر <embed> در HTML 4 و XHTML اعتبار ندارد.

    نکته: استفاده از اعلان <DOCTYPE html!> در بالای صفحه، مشکل اعتبار را حل می کند.

    راه حل YouTube

    Wiki

    راحت ترین روش برای نمایش ویدئو در HTML استفاده از YouTube می باشد.

    استفاده از یک Hyperlink

    Wiki

    اگر صفحه ای شامل یک لینک به یک فایل مدیا باشد، اغلب مرورگرها از یک "نرم افزار کمکی" برای پخش فایل استفاده می کنند.

    کد زیر لینکی را به یک فایل Flash نشان می دهد. اگر کاربری روی این لینک کلیک کند، مرورگر برای پخش فایل یک نرم افزار کمکی را فراخوانی می کند: (مثل Windows Media Player)

    مثال (پخش ویدئو در HTML)

    <a href="/intro.swf">Play a video file</a>
    خودتان امتحان کنید »

    نکته ای در مورد ویدئوهای Inline

    Wiki

    هنگامی که ویدئویی در یک صفحه وب قرار داده می شود و یا بخشی از آن صفحه می شود، ویدئوی Inline نامیده می شود.

    اگر قصد دارید از ویدئوهای Inline در وب خود استفاده کنید، بدانید که بعضی از مردم ویدئوهای Inline را مزاحم می دانند. همچنین توجه داشته باشید که بعضی کاربران گزینه ویدئوهای Inline را در مرورگرشان غیر فعال کرده اند.

    بهترین پیشنهاد ما به شما این است که تنها زمانی از ویدئوهای Inline در صفحات وب استفاده کنید که کاربر، انتظار دیدن ویدئویی را دارد. مثالی از این مورد این است که کاربر برای دیدن ویدئویی روی لینکی کلیک کند و صفحه ای باز شود که شامل آن ویدئو است.

    تگ های Multimedia در HTML

    Wiki

    = جدید در HTML5.

    تگ توضیحات
    <embed> یک عنصر multimedia را در صفحات HTML درج می کند (در HTML4 شناخته شده نیست)
    <object> یک عنصر multimedia را در صفحات HTML درج می کند
    <param> یک پارامتر برای object تعریف می کند
    <audio> صدا را در صفحات HTML درج می کند
    <video> یک ویدئو یا فیلم در صفحات HTML درج می کند
    <source> در عناصر <video> و <audio> برای مشخص کردن منبع صدا یا فیلم استفاده می شود.
    <track> در عناصر <video> و <audio> برای مشخص کردن متن trackها استفاده می شود.
    READ MORE

  • عناصر در xHTML

    18 شهریور 1397

    عناصر در XHTML همان عناصر HTML هستند که مانند XML نوشته شده اند.

    عناصر XHTML - قوانین نوشتاری

    Wiki

    • عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند.
    • عناصر XHTML باید همیشه بسته شوند.
    • عناصر XHTML باید با حروف کوچک نوشته شوند.
    • یک سند XHTML باید یک عنصر ریشه ای داشته باشند. (کل عناصر موجود در سند، در یک عنصر ریشه ای قرار داده شوند)

    عناصر XHTML باید به طور صحیح به صورت تودرتو نوشته شوند

    Wiki

    در HTML، بعضی عناصر می توانند به طور نادرست با یکدیگر تودرتو شوند، مثل مورد زیر: 

    <b><i>This text is bold and italic</b></i>

      در XHTML، تمامی عناصر باید به طور صحیح با یکدیگر تو در تو نوشته شوند، مثل مورد زیر: 

    <b><i>This text is bold and italic</i></b>

    عناصر XHTML باید همیشه بسته شوند

    Wiki

    قطعه کد زیر غلط است:

    <p>This is a paragraph
    <p>This is another paragraph

    این درست است:

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>

    عناصر تهی نیز باید بسته شوند

    Wiki

    قطعه کد زیر غلط است:

    A break: <br>
    A horizontal rule: <hr>
    An image: <img src="/happy.gif" alt="Happy face">

    این درست است:

    A break: <br />
    A horizontal rule: <hr />
    An image: <img src="/happy.gif" alt="Happy face" />

    عناصر XHTML باید با حروف کوچک نوشته شوند

    Wiki

    قطعه کد زیر غلط است:

    <BODY>
    <P>This is a paragraph</P>
    </BODY>

    این درست است:

    <body>
    <p>This is a paragraph</p>
    </body>
    READ MORE

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه