<video controls="controls" >此标签中添加preload="auto"是预备播放点击后播放， 添加autoplay="autoplay"可以实现自动播放，详见W3school教程：网页链接
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受默认视频控件的控制.实际上,自定义视频控件并不困难.本文将告诉你如何用jQuery自定义视频控件,希望对你有用!
DEMO DOWNLOAD
HTML5 Video 基础标签
1 <video id="myVideo" controls poster="video.jpg" width="600" height="400" >
2<source src="video.mp4" type="video/mp4" />
3<source src="video.webm" type="video/webM" />
4<source src="video.ogv" type="video/ogg" />
5<p>Your browser does not support the video tag.</p>
6 </video>
video标签最好包含mp4、webM和ogg这三种源视频文件-可以跨浏览器。如果浏览器不支持html5，你可以使用flash作为后备！
开始制作 HTML5 Video Controls
幸运的是HTML5 Video 的Api可以用JavaScript访问,并使用他们来作为控制视频的媒介.
在编码之前让我简单的介绍一下jQuery是如何获取video标签的.
在JavaScript中我们使用getElementById('videoID')来获取Video标签,作为结果,我们会获取到一个Dom对象.但是这不是等价的jQuery对象.$("videoID")会返回一个jQuery对象.不是Dom对象.这就是为什么在将其转换为Dom对象之前我们不能直接使用jQuery选择器调用/使用Html5 Video的Dom属性和功能.
1 //return a DOM object
2 var video = document.getElementById('videoID')//or
3 var video = $('#videoID').get(0)//or
4 var video = $('#videoID')[0]
5
6 //return a jQuery object
7 var video = $('#videoID')
Video Play/Pause Controls 播放/暂停 按钮
好的,这是所有的介绍.现在让我们来编码.首先,我们要创建一个简单的播放/暂停按钮.
1 <div class="control">
2<a href="#" class="btnPlay">Play/Pause</a>
3 </div>
我们可以轻松的控制Html5 Video的播放与暂停状态.
1 //Play/Pause control clicked
2 $('.btnPlay').on('click', function() {
3if(video[0].paused) {
4 video[0].play()
5}
6else {
7 video[0].pause()
8}
9return false
10 }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box {
width: 100pxheight: 100px position: relative
}
.box a {
width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */
}
.box a:hover {
width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1
}
</style>
</head>
<body>
<div class="box"><img src="contact_us.jpg" width="100" height="100" /><a href="http://www.baidu.com"></a></div>
</body>
</html>
--------------------- ps ----------------------
图片你自己可以找2张，路径应该也不用我说了吧。img 是你的新闻图片，background是你的那个按钮图。你要用的效果涉及到鼠标滑动，CSS的话就是hover，但是A标签里面没有内容的情况下在IE下面是不能点击的，所以用到了background:#fff然后用滤镜效果让它透明。希望我的答案能让你满意，如果还有疑问可以发消息给我。 这个方法我测试过了的。
