当前位置:首页 » HTML/CSS

HTML5如何向网页中插入视频

2011-05-25 20:34 本站整理 浏览(9662)
很多网站中我们可以看到有视频的播放,一般是在网页的右下角弹出一个窗口,窗口里播放视频;也有的是在网页最显眼的位置。不管是在网页的哪个位置显示视频,我们都是要将我们的视频插入到HTML代码中去的,这里我分享一个样式比较好的向网页中插入视频的HTML代码。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HTML5 Video Demo</title>
</head>
<body>
<div style="width: 667px; margin: 0 auto;">
 <video width="667" height="375" controls>
  <source src="FILE_NAME.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="FILE_NAME.ogv"  type="video/ogg" />
  <object width="667" height="375" type="application/x-shockwave-flash" data="FILE_NAME.swf">
   <param name="movie" value="FILE_NAME.swf" />
   <param name="flashvars" value="controlbar=over&amp;image=PLACEHOLDER_FILE_NAME.jpg&amp;file=FILE_NAME.mp4" />
   <img src="PLACEHOLDER_FILE_NAME.jpg" width="250" height="152" alt="ALT_HERE" title="TITLE_HERE" />
  </object>
 </video>
</div>
</body>
</html>

可以先制作自己的flash视频,然后在网页中显示看下效果吧。