简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Detailed explanation of sharing video playback examples in HTML

零下一度
Release： 2017-05-15 13:29:51
Original
1824 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：
视频，HTML，实例
source：php.cn
Previous article：Basic introduction to HTML elements Next article：Detailed explanation of examples of HTML audio
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
Latest Articles by Author
Latest Issues
CSS bottom border on navigation bar I have a navigation bar and I have added a red line at the bottom when any item in the lis...
From 2024-04-06 15:04:41
0
2
347
Make sure the table cell's container fills the entire height of the parent I'm trying to vertically align the content without using Flexbox, because there are some i...
From 2024-04-04 16:03:18
0
1
404
Use JS to control playback quality Is there any way to control the playback quality of a video using Javascript? More precise...
From 2024-04-04 00:21:55
0
1
384
Create diverse card layouts using a single grid or Flex: a practical guide I'm trying to make a responsive card layout like the one pictured. What I'm currently doin...
From 2024-04-02 21:07:36
0
2
377
How to make an image appear in the center of the header? First of all, my code is based on 3 files, an HTML, a CSS and a JS. It should be noted tha...
From 2024-04-01 23:49:58
0
1
372
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！