在页面中经常会插入一些视频效果，或者音效
页面中动态的显示影响内容
1. gif图片
2. flash实现 缺点：成本高；优点：兼容性好，有相关插件
3. H5提供了video标签 优点：比较简单 缺点：兼容性不好
video使用
视频组成： 画面，音频，编码格式
视频编码：通过特定的压缩技术，将某个视频格式的文件转化成另一种视频格式文件的方式；H.264(蓝光技术，充分利用各种冗余),Thero(通过HTML5元素提供了对Ogg/Thero视频原生的支持),VP8(google开源，能以更少的数据提供高质量视频)
视频解码：用特定方法将已经编码过的视频还原为原有的格式；
常见的音频格式：编码：AAC,MP3，Vorbis
HTML5支持的视频格式：Ogg,mp4,webm
这三种格式的视频文件并不是全部支持所有的浏览器，所以，存在一个兼容问题，需要解决；
1. 直接使用video标签，src属性上 放上视频文件路径，及其他的一些属性：autoplay。
controls(添加控件，但是控件是浏览器自动生成的，跨浏览器表现一致性被破坏)，所以经常需要自定义播放器控件)
IE6-8不支持，但不能放弃这一波人；
<video autoplay controls poster src="./sources/3theA.mp4"></video>
2. video标签内部写的内容在不支持video的时候会显示 可以使用flash插件
<video autoplay controls poster src="./sources/3theA.mp4"> 您的浏览器版本太低，快要爆炸，亲尽快换版本使用 </video>
video.js是一个通用的在网页上嵌入视频播放器的JS库，Video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash播放器；embed的src中放入视频路径；（可以搜索音悦台用的是flash插件）
<video autoplay controls poster src="./sources/3theA.mp4"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="#version=7,0,0,0" width="550" height="400" id="Untitled-1" align="center"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="mymovie.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="//s.c.yinyuetai.com/swf/common/playerloader.swf?t=20170724" quality="high" bgcolor="#ffffff" width="550" height="400" name="mymovie" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" /> </object> </video>
3. 因为没有任何一种视频格式支持所有的浏览器，所以在video标签内部通过source标签来引入不同格式的文件；
如果没有MP4格式就会向下继续找ogg和webm;
<video autoplay controls> <source src="./sources/3theA.mp4" type="video/mp4"> <source src="move.ogg" type="video/ogg"> <source src="move.webm" type="video/webm"> </video>
video的常见属性：
| 属性 | 值 | 描述 |
| autoplay | autoplay | 视频就绪自动播放 |
| controls | controls | 向用户显示播放控件 |
| width | pixels（像素） | 设置播放器的宽度 |
| height | pixels（像素） | 设置播放器的高度 |
| loop | loop |
播放完是否继续播放该视频，循环播放 |
| preload | preload |
是否等加载完再播放 |
| src | url |
视频url地址 |
| poster | imgurl |
加载等待的画面图片 |
video的API属性：duration（媒体播放总时长），ended(当前播放是否结束)
video传输格式：
var player = new Player('.a',{
type:'video',
200,
autoplay:true ,
sources:{
mp4:'./sources/3theA.mp4',
ogg:'ogg',
webm:'webm'
}
})
audio传输格式：面向对象写法
var player = new AudioPlayer('.a',{
type:'audio',
autoplay:true ,
sources:{
mp3:''
},
musics:[
{title:'how long with i love you',singer:'周杰伦',src:'../video/sources/1.m4a',imgurl:'../video/sources/1.jpg',lrc:'../video/sources/31.lrc'},
{title:'Unreval',singer:'动静食尸鬼',src:'../video/sources/2.mp3',imgurl:'../video/sources/2.jpg',lrc:'../video/sources/31.lrc'},
{title:'未闻花名',singer:'周伦',src:'../video/sources/3.mp3',imgurl:'../video/sources/3.jpg',lrc:'../video/sources/31.lrc'}
]
})
注意：
1. video只是一个标签，同时设置宽高只是给标签设置；可以单独设置width和height其中一个，视频有自己的格式；可用通过transform：scaleY(2)来设置；
audio:
1. audio 的src没有切换 解决方法： 增加 audio.load();
2. audio的音量volumn的取值范围值(0-1),为了防止计算机二进制存储的时候出现浮点数；设定vol的初始值为正整数；在最后除以10就可以了； eg:0.1+0.2=0.30000000000...4
3. .lrc歌词部分：利用$.ajax获取.lrc内容
$.ajax({
url:'./31.lrc',
success(res){
let arr = res.split('[').map(function(item){
let _arr = item.split(']') //以数组的形式输出：时间：歌词
return {
time:_arr[0],
title:_arr[1]
}
})
that.lrc = arr;
}
4.全屏显示
launchFullscreen: function(element)
{
//此方法不可以在異步任務中執行，否則火狐無法全屏
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else if(element.oRequestFullscreen){
element.oRequestFullscreen();
}
else if(element.webkitRequestFullscreen)
{
element.webkitRequestFullScreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
var cssText = '100%;height:100%;overflow:hidden;';
docHtml.style.cssText = cssText;
docBody.style.cssText = cssText;
videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
document.IsFullScreen = true;
}
},
//退出全屏
exitFullscreen :function(element)
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.oRequestFullscreen){
document.oCancelFullScreen();
}else if (document.webkitExitFullscreen){
document.webkitExitFullscreen();
}else{
var docHtml = document.documentElement;
var docBody = document.body;
var videobox = document.getElementById('videobox');
docHtml.style.cssText = "";
docBody.style.cssText = "";
videobox.style.cssText = "";
document.IsFullScreen = false;
}
}