<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0padding: 0}
video::-webkit-media-controls-enclosure {
/*禁用播放器控制栏的样式*/
display: none !important
}
#wrap{width:700pxposition: relativeoverflow: hiddenmargin: 0 auto}
.box{ position: absolutebottom: 10pxwidth:100%text-align: center}
/*#play,#stop,#full,#secfull{ width: 7%}
#videotimer{width: 20%}*/
/*#time{float: left}*/
</style>
</head>
<body>
<div class="full" id="wrap">
<section class="video">
<video width="700" height="" id="video" loop="" autoplay="">
<source src="b.mp4" ></source>
</video>
</section>
<section class="box">
<button id="play">开始</button>
<button id="stop">暂停</button>
<button id="full">全屏</button>
<button id="escfull">退出全屏</button>
<input type="range" id="videotimer" min="0" value="0" />
<!--<div id="time">-->
<span>00</span>:<span class="now">00</span>/
<time class="minute">00</time>:<time class="second">00</time>
<!--</div>-->
<!--<button id="mute">静音</button>-->
</section>
</div>
<script src="../jquery-1.12.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var aplay=document.getElementById("play")
var astop=document.getElementById("stop")
var avideo=document.getElementById("video")
var full=document.getElementById("full")
var escfull=document.getElementById("escfull")
var wrap=document.getElementById("wrap")
var mute=document.getElementById("mute")
aplay.onclick=function(){
avideo.play()
}
astop.onclick=function(){
avideo.pause()
}
// mute.onclick=function(){
// avideo.muted()
// }
full.onclick=function(){
if(wrap.webkitRequestFullScreen){
wrap.webkitRequestFullScreen()
$('.full').css("width",$(window).width()+"px")
$('.full').css("height",$(window).height()+"px")
avideo.style.width = $(window).width()+"px"
}else if(wrap.mozRequestFullScreen){
wrap.mozRequestFullScreen()
}else if(wrap.msRequestFullscreen){
wrap.msRequestFullscreen()
}
}
escfull.onclick=function(){
if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen()
wrap.style.width = 700+"px"
wrap.style.height = 'auto'
avideo.style.width = 700+'px'
}
}
avideo.onloadedmetadata=function(){
var videoLong=Math.floor(avideo.duration)
var videonow=Math.floor(avideo.currentTime)
var min=Math.floor(videoLong/60)
var sec=Math.floor(videoLong%60)
$('.minute').html(min)
$('.second').html(sec)
$('#videotimer').attr("max",videoLong)
$('#videotimer').change(function(){
avideo.currentTime=$(this).val()
})
avideo.ontimeupdate=function(){
$('#videotimer').val(Math.floor(avideo.currentTime))
$('.now').html(Math.floor(avideo.currentTime))
}
}
</script>
</body>
</html>
最近接到一个应用场景：将.FLV格式视频文件作为页面背景。网上直接查将.FLV格式文件作为页面背景方法不太明确，突然想到了用H5的新标签video,于是找到了将视频作为H5页面的方法：
（1）首先新建一个带video标签的H5页面,将video标签的source里写上视频链接地址(先放入，MP4格式的demo文件)。
页面在chrome浏览器下看是一个静态画面，给video加上autoplay自动播放属性属性，加上循环播放的属性loop，以及不需要声音属性muted，这样视频就安放好了。
（2）这个时候video并没有铺满整个屏幕，在body里添加样式margin:0 autol时视频横向铺满整个页面；接下来给video添加样式，让它作为页面背景。
其中z-index: -99来设置video的层级，-webkit-filter:grayscale(100%)来设置视频的灰色调属性，百分比越低灰度值越高。
（3）测试完上面的OK后，确定video属性可以将视频作为H5页面背景，然后查了一下video标签可以播放的视频格式，目前，<video>元素支持三种视频格式：MP4、WebM、Ogg。那把.flv格式转成.mp4格式的文件就可以搞定了需求了。
通过做上面的需求，又将video标签属性的方方面面总结了一下：
1、浏览器支持：
IE9浏览器及以上、Chrome浏览器4及以上、FF浏览器3.5及以上、safari4.0浏览器及以上、opera浏览器
10.5及以上；
2、<video>元素支持三种视频格式：
MP4、WebM、Ogg。但是似乎各个浏览器对MP4格式的支持性最好。
MP4格式 MIME-type=video/mp4
WebM格式MIME-type=video/WebM
Ogg格式MIME-type=video/Ogg
3、video的可选属性
(1) src属性和poster属性：video属性的width,height属性就是来设置视频的宽高属性，src属性就是用来引入视频的路径，poster是用来指定一张图片，作为视频的封面。
(2) preload属性
此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据
（包括尺寸，第一帧，曲目列表，持续时间等等）。
Auto：全部预加载
(3) controls属性
controls="controls"表明需要不需要有控制栏，控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
(4) loop属性
一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。
(5) autoplay属性
Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。
(6) source标签
Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。就是防止一个浏览器不能播放一种格式文件的时候，可以播放相同文件下其它格式文件。
此标签包含src、type、media三个属性。
src属性：用于指定媒体的地址，和video标签的一样。
Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到<style>标签的media属性了么？
通过html5中的video标签添加视频文件。
1、新建html文件，如图所示，在body标签中添加video标签，为video标签设置“src”属性，属性值是视频文件地址，这里以html同一目录下的“movie.mp4”视频为例：
2、此时的视频只会显示一个封面，并没有控制按钮，这时为video标签添加“controls”属性，如图所示，不需要添加属性值，可以看到视频中出现了常用的控制按钮：
3、直接插入的视频显示宽和高是视频本身默认的宽和高，这时可以给video添加我们想要的宽和高，这里以宽度400和高度300为例，添加属性“width”，属性值为“400”，添加属性“height”，属性值为“300”：
4、这时视频默认是加载完成后等待用户点击播放按钮再播放，如果需要加载完成后自动播放，可以给video添加属性“autoplay”，属性值为“autoplay”，这时视频加载完成后就会自动播放：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）