Detailed explanation of sharing video playback examples in HTML

There are many ways to play videos in HTML.

HTML Videos (Videos) Playback

Examples

<video width="320" height="240" 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>

Problems and Solutions

Playing videos in HTML is not easy!

You need to know a lot of techniques to ensure that your video files work in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone) Play.

In this chapter, W3CSchool summarizes the problems and solutions for you.

Use the tag

The tag is used to embed multimedia elements in the HTML page.

The following HTML code displays a Flash video embedded in a web page:

Example

<embed src="intro.swf" height="200" width="200">

Problem

HTML4 does not recognize the tag. Your page cannot pass verification.

If the browser does not support Flash, the video will not play

iPad and iPhone cannot display Flash videos.

If you convert the video to other formats, it still won't play in all browsers.

Use the

The

The following HTML fragment displays a Flash video embedded in a web page:

Example

<object data="intro.swf" height="200" width="200"></object>

Problem:

If the browser does not support Flash, it will not play video.

iPad and iPhone cannot display Flash videos.

If you convert the video to other formats, it still won't play in all browsers.

UsingHTML5

HTML5

The following HTML snippet displays a video in ogg, mp4 or webm format embedded in a web page:

Example

<video width="320" height="240" 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>

Question:

You must put the video Convert to many different formats. The

The best HTML solution

The following examples use 4 different video formats. The HTML 5

HTML 5 +

<video width="320" height="240" 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>

Problem:

You have to convert the video to many different formats

Youku Solution

The easiest way to display videos in HTML is to use a video website such as Youku.

If you want to play a video on a web page, you can upload the video to a video website such as Youku, and then insert the HTML code into your web page to play the video:

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

UseHyperlink

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

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

实例

<a href="intro.swf">Play a video file</a>

关于内联视频的说明

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

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

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

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

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

The above is the detailed content of Detailed explanation of sharing video playback examples in HTML. For more information, please follow other related articles on the PHP Chinese website!