音视频

在页面中经常会插入一些视频效果，或者音效

页面中动态的显示影响内容

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方法：play(),pause()

 

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;
        }
    }