HTML Videos (Videos)

HTML video (Videos) playback

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Self-selected course (such as about Zhihui.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 src="movie.mp4" width="320" height="240">
				<embed width="320" height="240" src="movie.swf">
			</object>
		</video>
	</body>
</html>

Use the <embed> tag

The purpose of the <embed> tag is to embed multimedia elements in an HTML page.

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

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

question

HTML4 does not recognize the <embed> tag. Your page could not be verified.

If the browser does not support Flash, the video will not play

iPads and iPhones cannot display Flash video.

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

Use the <object> tag

The purpose of the <object> tag is to embed multimedia elements in the HTML page.

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

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

question

HTML4 does not recognize the <embed> tag. Your page could not be verified.

· If the browser does not support Flash, the video will not play

• iPad and iPhone cannot display Flash video.

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

Using the HTML5 <video> element

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

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

The following HTML snippet displays 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"> 
    
您的浏览器不支持 video 标签。 
    
</video>

question:

· You have to convert video to many different formats.

· The <video> element has no effect in older browsers.

The best HTML solution

Four different video formats are used in the following examples. The HTML 5 <video> element attempts to play the video in one of the mp4, ogg, or webm formats. If both fail, fallback to the <embed> 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>

question:

· You have to convert the video to many different formats

Youku Solutions

The easiest way to display videos in HTML is to use video sites like Youku.

If you want to play the video on your webpage, you can upload the video to video sites such as Youku, and then insert the HTML code into your webpage 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> 
  

Use hyperlinks

If a web page contains hyperlinks to media files, most browsers use "helper applications" to play the files.

The following code snippet shows a link to an AVI file. If the user clicks the link, the browser launches a "helper application" such as Windows Media Player to play the AVI file:

example

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

HTML multimedia tags

New : HTML5 new tag.

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