HTML ভিডিও

在 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>

亲自试一试

问题,问题,以及解决方法

在 HTML 中播放视频并不容易!

您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。

在本章,CodeW3C.com 为您总结了问题和解决方法。

使用 标签

标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 代码显示嵌入网页的 Flash 视频:

实例


亲自试一试

সমস্যা

  • HTML4 无法识别 标签。您的页面无法通过验证。
  • 如果浏览器不支持 Flash,那么视频将无法播放
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

使用 标签

标签的作用是在 HTML 页面中嵌入多媒体元素。

下面的 HTML 片段显示嵌入网页的一段 Flash 视频:

实例



亲自试一试

সমস্যা

  • 如果浏览器不支持 Flash,将无法播放视频。
  • iPad 和 iPhone 不能显示 Flash 视频。
  • 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

使用

<video> ট্যাগের কাজ হল HTML পেজে ভিডিও এলিমেন্ট যোগ করা।

নিম্নোক্ত HTML শব্দমূলটি একটি ogg, mp4 বা webm ফরম্যাটের ভিডিওকে ইন্টারনেট পেজে প্রদর্শন করবে:

实例

<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" />
আপনার ব্রাউজারটি ভিডিও ট্যাগটি সমর্থন করে না。
</video>

亲自试一试

সমস্যা

  • আপনি ভিডিওকে অনেকগুলি ভিন্ন ফরম্যাটে রূপান্তরিত করতে হবে
  • <video> এলিমেন্টটি পুরাতন ব্রাউজারগুলিতে কার্যহীন
  • <video> এলিমেন্টটি HTML 4 এবং XHTML-তে প্রমাণন হতে পারে না。

সবচেয়ে ভালো HTML সমাধান

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" />
  </object>
</video>

亲自试一试

এই উদাহরণে 4টি ভিন্ন ভিডিও ফরম্যাট ব্যবহৃত হয়েছে।HTML 5 <video> এলিমেন্টটি mp4, ogg বা webm ফরম্যাটের একটি ভিডিও প্লে করার চেষ্টা করবে।যদি সবগুলি ব্যর্থ হয়, তবে <embed> এলিমেন্টে প্রতিস্থাপিত হবে。

সমস্যা

  • আপনি ভিডিওকে অনেকগুলি ভিন্ন ফরম্যাটে রূপান্তরিত করতে হবে
  • <video> এলিমেন্টটি HTML 4 এবং XHTML-তে প্রমাণন হতে পারে না。
  • <embed> এলিমেন্টটি HTML 4 এবং XHTML-তে প্রমাণন হতে পারে না。

মন্তব্য:<!DOCTYPE html> (HTML5) ব্যবহার করে প্রমাণন সমস্যা সমাধান করুন。

যুকু সমাধান

HTML-তে ভিডিও প্রদর্শন করার সবচেয়ে সহজ পদ্ধতি হল যুকু এবং অন্যান্য ভিডিও ওয়েবসাইট ব্যবহার করা。

আপনি যদি ইন্টারনেট পেজে ভিডিও প্লে করতে চান, তবে আপনি ভিডিওকে যুকু এবং অন্যান্য ভিডিও ওয়েবসাইটে আপলোড করতে পারেন এবং পরে আপনার পেজে HTML কোড যোগ করে ভিডিও প্লে করতে পারেন:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">

亲自试一试

使用超链接

如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:

实例

Play a video file

亲自试一试

关于内联视频的一段注释

当视频被包含在网页中时,它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。

同时请注意,用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。

HTML 4.01 多媒体标签

标签 描述
不赞成。定义内嵌 applet。
不赞成。定义内嵌对象。(HTML5 中允许)
定义内嵌对象。
定义对象的参数。

HTML 5 多媒体标签

标签 描述
标签定义声音,比如音乐或其他音频流。
标签定义嵌入的内容,比如插件。