11.53. HTML Video

发布时间 ：2024-02-22 23:00:07 UTC      

There are many ways to play videos in HTML.

11.53.1. HTML video (Videos) playback

Example 

<videowidth="320"height="240"controls><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.webm"type="video/webm"><objectdata="movie.mp4"width="320"height="240"><embedsrc="movie.swf"width="320"height="240"></object></video>

11.53.2. Problems and solutions

Playing videos in HTML is not easy!

You need to be familiar with a lot of tricks to ensure that your video files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).

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

11.53.3. Use <embed> label

<embed> the role of tags is to embed multimedia elements in HTML pages.

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

Example 

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

problem

  • HTML4 does not recognize <embed> label. Your page failed validation.

  • If the browser does not support Flash, the video will not be played

  • IPad and iPhone cannot display Flash video.

  • If you convert the video to another format, it still won’t play in all browsers.

11.53.4. Use the < object > tag

<object> The role of tags is to embed multimedia elements in HTML pages.

The following HTML clip shows a Flash video embedded in a web page:

Example 

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

Question:

  • If the browser does not support Flash, the video cannot be played.

  • IPad and iPhone cannot display Flash video.

  • If you convert the video to another format, it still won’t play in all browsers.

11.53.5. Use the HTML5 < video > element

HTML5 <video> the tag defines a video or movie.

<video> elements are supported in all modern browsers.

The following HTML snippet shows a video in ogg, mp4, or webm format embedded in the 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 video tags.
</video>

Question:

  • You must convert the video to many different formats.

  • <video> the element is not valid in older browsers.

11.53.6. The best HTML solution

Four different video formats are used in the following examples. HTML 5 <video> the element attempts to play the video in one of the mp4, ogg, or webm formats. If both fail, fall back to <embed> element.

11.53.7. HTML 5 + < object > + < embed > 

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

Question:

  • You have to convert the video to many different formats

11.53.8. Use hyperlinks

If a web page contains a hyperlink to a media file, most browsers use Auxiliary applications to play the file.

The following code snippet shows a link to the AVI file. If the user clicks on the link, the browser will launch an “auxiliary application”, such as Windows Media Player, to play the AVI file:

Example 

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

11.53.9. Instructions on inline video

When video is included in a web page, it is called inline video.

If you plan to use inline video in your web application, you need to be aware that many people find inline video exasperating.

Also note that the user may have turned off the inline video option in the browser.

Our best advice is to include them only where users want to see inline videos. A positive example is that when a user needs to see a video and click on a link, the page opens and the video is played.

11.53.10. HTML multimedia tags

New: new HTML5 tag.

Label

Description

< embed >

Define embedded objects. It is not approved in HTML4 and allowed in HTML5.

< object >

Define embedded objects.

< param >

Define the parameters of the object.

< audio > New

Defines the sound content

< video > New

Define a video or movie

< source > New

Multimedia resources that define media elements (< video > and < audio >)

< track > New

A subtitle file or other file containing text that specifies the media element (< video > and < audio >)

文章链接 ： 11.53. HTML Video

Principles and Applications of WebGIS  37

IT Tools  337

Web Frameworks  49

Principles, Technologies, and Methods of Geographic Information Systems  102

In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.

WEB Technology  258

Systems  232

Programming Language  353

Powered by Django & PostgreSQL (with PostGIS)