web中的音视频的一些方法

web.jpeg

标签

• 音频

• 视频

一些常用的属性
autoplay：自动播放
controls：控制条
loop:循环次数 -1是无限循环
muted:是否静音
preload:告诉浏览器认为的最佳用户体验方式是什么
1. none:视频不需要缓存
2. metadata:提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。
3. auto: 可以下载整个视频，即使用户并不一定会用它。

• 兼容性
  • 随着浏览器的升级，现在一个都兼容到了上述的标签，不过IE低版本或者没有升级的浏览器还是要兼容一些
  • source 就是兼容带不同的浏览器识别，不同的格式

多媒体在JS中的一些方法

• 方法

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
play()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

• 属性

属性	描述
audioTracks	返回表示可用音轨的 AudioTrackList 对象
autoplay	设置或返回是否在加载完成后随即播放音频/视频
buffered	返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller	返回表示音频/视频当前媒体控制器的 MediaController 对象
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin	设置或返回音频/视频的 CORS 设置
currentSrc	返回当前音频/视频的 URL
currentTime	设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted	设置或返回音频/视频默认是否静音
defaultPlaybackRate	设置或返回音频/视频的默认播放速度
duration	返回当前音频/视频的长度（以秒计）
ended	返回音频/视频的播放是否已结束
error	返回表示音频/视频错误状态的 MediaError 对象
loop	设置或返回音频/视频是否应在结束时重新播放
mediaGroup	设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted	设置或返回音频/视频是否静音
networkState	返回音频/视频的当前网络状态
paused	设置或返回音频/视频是否暂停
playbackRate	设置或返回音频/视频播放的速度
played	返回表示音频/视频已播放部分的 TimeRanges 对象
preload	设置或返回音频/视频是否应该在页面加载后进行加载
readyState	返回音频/视频当前的就绪状态
seekable	返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking	返回用户是否正在音频/视频中进行查找
src	设置或返回音频/视频元素的当前来源
startDate	返回表示当前时间偏移的 Date 对象
textTracks	返回表示可用文本轨道的 TextTrackList 对象
videoTracks	返回表示可用视频轨道的 VideoTrackList 对象
volume	设置或返回音频/视频的音量

• 事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载音频/视频的当前帧时
loadedmetadata	当浏览器已加载音频/视频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在已因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频中的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时
waiting	当视频由于需要缓冲下一帧而停止

注意: duration在获取文件的时长，不同的浏览器返回的可能不太一样，比如谷歌可能有时返回的事Nan，没有获取到，所以在获取的时候，一般要判断处理，资源是否加载完成

全屏方法

HTML5规范允许用户自定义网页上任一元素全屏显示。

• Node.requestFullScreen()开启全屏显示

• Node.cancelFullScreen()关闭全屏显示

• 由于其兼容性原因，不同浏览器需要添加前缀如：
  webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
  Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。

• document.fullScreen检测当前是否处于全屏
  不同浏览器需要添加前缀
  document.webkitIsFullScreen、document.mozFullScreen

• 页面文档全屏document.querySelector('body').webkitRequstFullScreen()

• 补充：浏览器 CSS 兼容前缀（-webkit- 谷歌,-moz-火狐,-ms-IE,-o- Opera）

• 兼容性的代码

 function toFullVideo(videoDom){

        if(videoDom.requestFullscreen){

            return videoDom.requestFullscreen();

        }else if(videoDom.webkitRequestFullScreen){

            return videoDom.webkitRequestFullScreen();

        }else if(videoDom.mozRequestFullScreen){

            return videoDom.mozRequestFullScreen();

        }else{

            return videoDom.msRequestFullscreen();

        }

    }

一般在使用 video和audio 标签时，都是配合 figure 标签使用,其语义是：定义媒介内容的分组，以及它们的标题。

定义 figure 元素的标题。

例子

image.png

html 代码

    
    

    
    
    
    




 

     
视频播放器
     
     

         
         

             

         
         

             00:00:00/
             00:00:00
         
         
     
 

js

window.onload = function () {
    //获取元素
    let start = document.querySelector("#play");
    let line = document.querySelector(".line");
    let curTime = document.querySelector(".curTime");
    let totlTime = document.querySelector(".totlTime");
    let full= document.querySelector("#full");
    let video = document.querySelector("video");

    let progressObj = document.querySelector(".progress");

    console.log(full);

    // oncanplay 监听
    video.oncanplay = function () {
        //获取总时长
        let time = this.duration;
        //设置总时间
        totlTime.innerText = cc_formatTime(time);
        
    }
    
    //点击播放
    start.onclick = function () {

        if (video.paused) {
            //播放
            video.play();
           //切换图标
           this.className = "iconfont icon-zanting";


        }else {

            //暂停
            video.pause();
            //切换图标
            this.className = "iconfont icon-bofang";
        }
        
    }

    //监听视频 播放的进度
    video.ontimeupdate = function () {

        //获取到当前播放的事件
        let nowTime = this.currentTime;
        //设置当前播放的时间
        curTime.innerText = cc_formatTime(nowTime);

        //更新播放条的长度
        // nowTime/this.duration = x/progressObj.clientWidth;

        line.style.width = (nowTime / this.duration) * progressObj.clientWidth + "px";

        
    }


    //监听点击事件

    progressObj.onclick = function (event) {
        event =  event || window.event;

        //根据 当前点击的距离 算出当前的 播放时间

        console.log(event.offsetX,this.clientWidth,video.duration);

       let time  = (event.offsetX/this.clientWidth) * video.duration;
        //设置当前播放的时间是多少
        video.currentTime = time;
        //更改播放的 当前时间
        curTime.innerText = cc_formatTime(time);
        //更改进度条
        line.style.width = event.offsetX + "px";
       //更改播放按钮的状态
        if (video.paused) {

            //切换图标
            start.className = "iconfont icon-zanting";

        }
        video.play();

        
    }

    //点击全屏
    full.onclick = function () {
        console.log("-----");
        toFullVideo(video);
    }


    function toFullVideo(videoDom){

        if(videoDom.requestFullscreen){

            return videoDom.requestFullscreen();

        }else if(videoDom.webkitRequestFullScreen){

            return videoDom.webkitRequestFullScreen();

        }else if(videoDom.mozRequestFullScreen){

            return videoDom.mozRequestFullScreen();

        }else{

            return videoDom.msRequestFullscreen();

        }

    }
    
}