Detailed explanation of sharing video playback examples in HTML

零下一度
Release: 2017-05-15 13:29:51
Original
1826 people have browsed it

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>
Copy after login
Copy after login

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">
Copy after login

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 tag

The tag is used to embed multimedia elements in HTML pages.

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

Example

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

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>
Copy after login

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>
Copy after login
Copy after login

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>
Copy after login

UseHyperlink

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

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

实例

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

关于内联视频的说明

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

如果您打算在 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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template