HTML videos (Videos) play


May 03, 2021 12:29 HTML


Table of contents


HTML Videos


There are many ways to play video in HTML.

You can use the hashtags, the labels, the labels, and the labels (enabled in HTML 5).


HTML video (Videos) playback

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

Try it out . . .


problems and solutions

Playing videos in HTML is not easy!

You need to know a lot of tricks to make sure your video files play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

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


Use the hashtags

The role of labels is to embed multimedia elements in HTML pages.

The following HTML code shows flash video embedded in a Web page:

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

Try it out . . .

Problem

  • HTML4 does not recognize the label. Your page could not be verified.
  • If your browser doesn't support Flash, the video won't play
  • iPads and iPhones don't display Flash videos.
  • If you convert a video to a different format, it still doesn't play in all browsers.

Use the label

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:

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

Try it out . . .

Problem:

  • If your browser doesn't support Flash, you won't be able to play the video.
  • iPads and iPhones don't display Flash videos.
  • If you convert a video to a different format, it still doesn't play in all browsers.

Use HTML5 and video elements

HTML5 - lt; video . . . tags define a video or movie.

The element is supported in all modern browsers.

The following HTML clip shows a video in ogg, mp4, or webm format embedded in a Web page:

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

Try it out . . .

HTML videos (Videos) play Tip:

ogg: Ogg file with Theora video encoding and Vorbis audio encoding
mp4:mp4 file with H.264 video encoding and AAC audio encoding
webm: Webm file with VP8 video encoding and Vorbis audio encoding

Problem:

  • You have to convert your video to many different formats.
  • The element is not valid in an older browser.

The best HTML solution

Four different video formats are used in the following examples. H tml 5 and video elements try to play the video in one of the mp4, ogg, or webm formats. If both fail, fall back to the element.

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>

Try it out . . .

Problem:

  • You have to convert your video to many different formats

Youku solutions

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

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

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


Use hyperlinks

If a Web page contains hyperlinks to media files, most browsers use Secondary Applications to play the files.

The following snippets show links to AVI files. If the user clicks on the link, the browser launches a "secondary application", such as Windows Media Player, to play the AVI file:

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

Try it out . . .


A description of the inline video

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

If you're planning to use inline video in a web application, you need to realize that many people find inline video annoying.

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

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


HTML multimedia tags

New : HTML5 new label.

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)