13518219792
HTML 5 video 标签
横峰ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：13518219792（备注：SSL证书合作）期待与您的合作！
定义和用法
video 标签定义视频，比如电影片段或其他视频流。
提示和注释
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性
实例
!-- 一段简单的 HTML5 视频：--
video src="movie.ogg" controls="controls"您的浏览器不支持 video 标签。/video
HTML5的视频标签是 video标签 可以直接使用video标签引入视频，也可以使用video内包含source标签引入视频 还有embed标签引入视频都是可以的
一共支持三种格式: Ogg、MPEG4、WebM。
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。
HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。
HTML5 是HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。
1、新建一个html文件，命名为test.html，用于介绍如何使用video控制视频。
2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。
3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。
4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。
5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。
6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。
7、在浏览器打开test.html文件，测试js控制视频播放的效果。
src 音乐资源的路径
autoplay 播放
controls 控制面板
loop 循环播放
muted 初始静音
audio支持的音乐格式有mp3 ogg wav
audio src="../source/菊花爆满山.mp3" autoplay="autoplay" controls="controls" loop="loop" muted="muted"你的浏览器太辣鸡了，不支持audio标签/audio
选择不同的文件格式
source标签为audio提供音乐资源，并且可以指定多种类型的音乐资源
audio autoplay="autoplay"
source src="../source/菊花爆满山.mp3" type="audio/mp3"
audio autoplay="autoplay"
source src="../source/菊花爆满山.mp3" type="audio/ogg"
/audio
video标签支持的文件类型 mp4 ogg webm
width height 是设置播放界面大小的，通常情况下只会指定一方的值，然后等比缩放
poster,当视频链接出现问题，或者网络延迟加载慢时，显示的一张占位图片
video autoplay="autoplay" controls="controls" loop="loop" muted="muted" width="200" height="500" poster="../source/haha.jpg"
source src="../source/diqiu.mp4" type="video/mp4"
你的浏览器太拉基了，不支持video标签
/video
video::-webkit-media-controls-enclosure {
display: none !important;
}
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
myVideo.muted=true;(是否静音：是)
}
btn[1].click=function(){
myVideo.muted=false;(是否静音：否)
}
btn[2].click=function(){
myVideo.play();(播放)
}
btn[3].click=function(){
myVideo.pause();(停止播放)
}
btn[4].click=function(){
myVideo.webkitrequestFullscreen();(全屏显示)
}
(1)、需要获取视频的总时长(duration)赋值给进度条的最大值，progress.max=video.duration;
(2)、需要获取当前视频播放的当前时间位置(currentTime)赋值给当前进度条的长度，progress.value=video.currentTime;
然后在视频播放的同时，要保证进度条的值能够及时获取到视频的时长和当前播放时间位置。
需要开一个定时器setInterval(pro，100);：就是说在1毫秒获取一次视频的数值赋值给progress进度条，这样就能保证及时性。
这样进度条就能和视频的准确的同步了。
首先需要获取到range的value值，赋给视频的音量上去，才能控制视频的音量大小，
input type="range" min="0" value="50" max="100" id="range"/
var ran=document.getElementById("range");
获取range.value,
赋值给video的音频属性:video.volume=range.value/100;
这时候就能实现简单拖动range而控制视频的音量了。
然后还需要进去前面的声音关闭判断，两则是独立的事件，所以，需要在拖动事件中进行判断是否是静音muted，然后在进行muted设置为false。
HTML5中的 video和audio这两个标签是HTML5中专门用来播放视频和音频资源的标签。video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。这两个标签的用法我们通过下面这个示例来进行说明一下。
!doctype html
html lang="zh-CN"
head
meta charset="utf-8" /
titlevideo标签和audio标签/title
head
body
h2video标签的使用/h2
//使用video标签播放视频Kobe.mp4 其中controls控制是否要显示视频控件
h2使用video标签的API/h2
video src="kobe.mp4" controls="controls" id="video"
你的破浏览器可以退休了，赶紧升级吧！
/video
//通过HTML5中Video提供的API 可以自定义控件控制视频的播放
br/
input type="button" value="播放" onclick="playVideo()" /
input type="button" value="停止" onclick="stopVideo()" /
input type="button" value="快进10秒" onclick="forward()" /
input type="button" value="快退10秒" onclick="back()" / br/
input type="button" value="闭嘴" onclick="shutup(this)" /
input type="button" value="加速x2" onclick="fast()" /
input type="button" value="减速x2" onclick="slow()" /
input type="button" value="正常倍速" onclick="normal()" / br/
input type="button" value="大声点" onclick="up()" /
input type="button" value="小声点" onclick="down()" /
script
var video=document.getElementById("video");
//播放视频
function playVideo(){
video.play();
}
//停止视频
function stopVideo(){
video.pause();
}
//快进10秒
function forward(){
video.currentTime+=10;
}
//快退10秒
function back(){
video.currentTime-=10;
}
//静音
function shutup(obj){
if(video.muted){
video.muted=false;
obj.value="闭嘴";
}else{
video.muted=true;
obj.value="说话";
}
}
//加速x2
function fast(){
video.playbackRate=2; //默认播放速度为1
}
//减速x2
function slow(){
video.playbackRate=1/2;
}
//正常倍速
function normal(){
video.playbackRate=1;
}
//大声点
function up(){
video.volume+=0.1; //声音值的范围为0-1
}
//小声点
function down(){
video.volume-=0.1; //声音值的范围为0-1
}
/script
//使用audeo标签播放音频wow.mp3 其中controls控制是否要显示视频控件，我们也可以和视频一样自定义控件来控制音频的播放，方法时类似的
h2audio标签的使用/h2
audio src="wow.mp3" controls
你的破浏览器可以退休了，赶紧升级吧！
/audio
/body
/html
这些都是HTML5中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。
