English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML Basic Tutorial

HTML Media

HTML Reference Manual

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML Video (Video) Playback

There are many ways to play video in HTML.

HTML video (Videos) playback

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>
Test and see ‹/›

Problems and solutions

It's not easy to play video in HTML!

You need to be proficient in a large number of skills to ensure that your video files can play on all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and all hardware (PC, Mac, iPad, iPhone).

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

Using the <embed> tag

The <embed> tag is used to embed multimedia elements in an HTML page.

The following HTML code shows the embedded Flash video on the web page:

Online example

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

Question

  • HTML4 Unable to recognize the <embed> tag. Your page cannot be verified.

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

  • iPad and iPhone cannot display Flash videos.

  • If you convert the video to other formats, it may still not play in all browsers.

Use the <object> tag

The <object> tag is used to embed multimedia elements in an HTML page.

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

Example

<object data="bookmark.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 videos.

  • If you convert the video to other formats, it may still not play in all browsers.

uses 　HTML5 The <video> element

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

The <video> element is supported in all modern browsers.

The following HTML snippet will display an embedded ogg, mp4 or webm format video:

Online example

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<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 attribute.
</video>
</body>
</html>
Test and see ‹/›

Question:

  • You must convert the video into many different formats.

  • The <video> element is not valid in old browsers.

the best HTML solution

The following example uses 4 different video formats. HTML 5 The <video> element will try to play videos in4One of ogg or webm format to play the video. If all fail, fallback to the <embed> element.

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Basic Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>
Test and see ‹/›

Question:

  • You must convert the video into many different formats

Youku solution

The simplest way to display videos in HTML is to use video websites like Youku.

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

You can find the embedded HTML code at the sharing entrance of major video websites.

<embed　src='https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf'　allowFullScreen='true'　quality='high'　width='480'　height='400'　align='middle'　allowScriptAccess='always'　type='application/x-shockwave-flash'></embed>
Test and see ‹/›

Using hyperlinks

If a web page contains hyperlinks to media files, most browsers will use an "assistant application" to play the file.

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

Online example

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

Description of inline video

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

If you plan to use inline videos in web applications, you need to be aware that many people find inline videos annoying.

At the same time, please note that the user may have already turned off the inline video option in the browser.

Our best advice is to only include them where the user wants to see inline videos. A positive example is when the user needs to see a video and click on a link, the page will open and play the video.

HTML multimedia tags

TagDescription
<embed>Define an embedded object. HTML4 Not recommended, HTML5 Allow in.
<object>Define an embedded object.
<param>Define the parameters of the object.
<audio>HTML5Defined sound content
<video>HTML5Define a video or movie
<source>HTML5Defined multimedia resources of the media element (<video> and <audio>)
<track>HTML5Specify the subtitle file or other text-containing file for the 'media' element (<video> and <audio>)
HTML Complete ExamplesHTML Audio (Audio)