Web前端-html 5—视频、音频

                                      video视频

视频

​​​​​​src 关联的就是视频的资源：相对 ，绝对  ，网络
此时法播放：只有src
有默认的大小
注意：当设置（宽高）一个值则另一个值会自动缩放
      若比例 失调则 最终的显示效果是动画区域为最大

controls ：播放的控制器
loop:循环播放
autoplay ：自动播放 但是有兼容性  火狐可以自动播放
poster:首次播放之前给一张图片 ，首次
视频  大部分都是在通过js 操控

video src="a.mp4" controls   autoplay="autoplay" poster="a.jpg"></video>

视频js

<video src="a.mp4" controls height="200"></video>
<h1>播放问题 0~2</h1>
<button>播放</button>
<button>暂停</button>
<button>切换</button>

<h1>放大缩小问题 3~5</h1>
<button>放大</button>
<button>缩小</button>
<button>还原</button>

<h1>放大缩小问题 6~8</h1>
<button>静音</button>
<button>不静音</button>
<button>获取值</button>

<h1>播放倍率9~11</h1>
<button>加倍播放</button>
<button>减倍播放</button>
<button>还原</button>

<h1>音量调节 12~13</h1>
<button>+音</button>
<button>-音</button>

<h1>获取当前的播放时长 14</h1>
<button>获取播放时长</button>

<h1>获取当前的视频时长 15</h1>
<button>获取视频时长</button>

<h1>设置循环播放 16</h1>
<button>循环</button>

<h1>设置播放 17</h1>
<button>设置播放</button>
<script>
    var myVideo = document.getElementsByTagName("video")[0]
    var btns = document.getElementsByTagName("button")
    //    设置内容的播放
    btns[0].onclick = function () {
        myVideo.play()
    }
    btns[1].onclick = function () {
        myVideo.pause()
    }
    btns[2].onclick = function () {
        // console.log(myVideo.paused); //暂停为true  播放为false
        if (myVideo.paused) {
            myVideo.play()
        } else {
            myVideo.pause()
        }
    }

    //设置放大缩小,还原  （思考 限制一下最小  限制一下最大）
    heightValue = myVideo.height
    btns[3].onclick = function () {
        // console.log(myVideo.height);
        myVideo.height = myVideo.height * 2
    }
    btns[4].onclick = function () {
        myVideo.height = myVideo.height / 2
    }
    btns[5].onclick = function () {
        myVideo.height = heightValue
    }

    //静音 不静音
    btns[6].onclick = function () {
        myVideo.muted = true
    }
    btns[7].onclick = function () {
        myVideo.muted = false
    }
    btns[8].onclick = function () {
        console.log(myVideo.muted);
    }


    //倍率播放  默认都是1倍播放
    //注意：减倍率播放的时候最低是0.1在低报错
    btns[9].onclick = function () {
        console.log(myVideo.playbackRate);
        myVideo.playbackRate += 0.1
    }
    btns[10].onclick = function () {
        console.log(myVideo.playbackRate);
        myVideo.playbackRate -= 0.1
    }
    btns[11].onclick = function () {
        console.log(myVideo.playbackRate);
        myVideo.playbackRate == 1
    }


    //音量调节  [0,1]之间  超出范围则报错
    btns[12].onclick = function () {
        myVideo.volume += 0.1
    }
    btns[13].onclick = function () {
        console.log(myVideo.playbackRate);
        myVideo.volume -= 0.1
    }


    //获取播放时长
    btns[14].onclick = function () {
        console.log(myVideo.currentTime)
    }

    // 获取视频时长
    btns[15].onclick = function () {
        console.log(myVideo.duration);
    };
    // 设置循环播放
    btns[16].onclick = function () {
        myVideo.loop=true;
    }

//    设置播放位置
    btns[17].onclick = function () {
        myVideo.currentTime=30;
    }

</script>

全屏

requestFullscreen()

<style>
    div{
        border: 10px solid #000;
        background-color: #0ff;
        width: 500px;
        height: 500px;
    }
    p{
        /*border: 10px solid #000;*/
        background-color: #f00;
        width: 200px;
        height: 200px;
    }
</style>
<div width = "500">
    <p class="tag">a</p>
</div>

<script>
    mdiv=document.getElementsByTagName("div")[0]
    document.getElementsByTagName("p")[0].onclick = function () {
        // this.requestFullscreen()
        mdiv.requestFullscreen()
        // console.log(window.getComputedStyle(mdiv,null).width);
        this.style.width = "75%"
    }
</script>

兼容

视频的资源格式有很多：
   MP4  avi  ogg   u38f（网页视频）

<video controls>
    <source src="a.mp4" type="video/mp4">
    <source src="a.ogg" type="video/ogg">
</video>

音频

<style>
    
  audio{
      width: 500px;
      height: 500px;
      background-color: #f00;
  }  
    
</style>
<!--<audio src="b.mp3" controls loop autoplay></audio>-->
<audio  controls loop autoplay>
    <source src="b.ogg" type="audio/ogg">
    <source src="b.mp3" type="audio/mpeg">
</audio>
<span>hehe</span>
<script>

    document.getElementsByTagName("audio")[0].onclick = function () {
        if(this.paused){
            this.play()
        }else{
            this.pause()
        }
    }

</script>