音频和视频处理 6

为什么会有audio？或者说audio的出现说是为了解决一些什么问题？
在H5之前，如果想在浏览器上播放视频或者音频的话需要通过一些插件的支持（比如flash），但是因为浏览器和插件之间存在一些兼容性的问题，所以为了解决这些问题，H5就退出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法，使其可以统一化、简便化。

6.1 audio

<body>
<!--controls控制preload预加载（metadata默认值auto缓存的作用）-->
<audio src="files/荣耀.mp3" preload="metadata" controls="controls"></audio>
</body>

（1）src()：本地音频文件的地址（也可以是网址）
（2）controls由浏览器提供的音频控件
（3）preload：预加载，让文件预先进行缓存，优化播放速度。
三个可选值：auto对整个音频文件进行加载默认值；
metadata只加载文件的元数据（第一帧，播放总时长，播放列表等）

<body>
<!--controls控制preload预加载（metadata默认值auto缓存的作用）loop循环播放
autoplay自动播放-->
<audio src="files/荣耀.mp3" autoplay loop preload="metadata" controls="controls"></audio>
</body>

loop循环播放，布尔类型在标签使用时默认为true
autoplay自动播放，布尔类型在标签使用时默认为true
6.1.1 控制函数和常用属性
（1）playOrPaused()：控制音频的播放和暂停。
Play()：播放
Pause()：暂停

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls"></audio>
<a href="javascript:void (0)" onclick="playOrPaused('chrome',this)">暂停/播放</a>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
    function playOrPaused(id, odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }
</script>

（2）getCurrentTime（）：获取已播放的总时长,或者说是播放了多长时间。

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls">
</audio>
<a href="javascript:void (0)" onclick="playOrPaused(this)">暂停/播放</a>
<a href="javascript:void (0)" onclick="getCurrentTime(this)">获取已播放的总时长</a>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
    function playOrPaused(odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }
//    获取已播放的总长度
    function getCurrentTime(){
        alert(audio.currentTime+"秒")
    }
</script>

（3）duration():获取音频的总时长

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls">
</audio>
<a href="javascript:void (0)" onclick="playOrPaused(this)">暂停/播放</a>
<a href="javascript:void (0)" onclick="getCurrentTime()">获取已播放的总时长</a>
<a href="javascript:void (0)" onclick="duration()">获取音频的总时长</a>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
    function playOrPaused(odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }

//    获取已播放的总长度
    function getCurrentTime(){
        alert(audio.currentTime+"秒")
    }

//    获取音频总时长
    function duration(){
        alert(audio.duration+"秒")
    }
</script>

（4）hideOrShowControls():对浏览器提供的音频控件进行隐藏或显示

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls">
</audio>
<a href="javascript:void (0)" onclick="playOrPaused(this)">暂停/播放</a>
<a href="javascript:void (0)" onclick="getCurrentTime()">获取已播放的总时长</a>
<a href="javascript:void (0)" onclick="duration()">获取音频的总时长</a>
<a href="javascript:void (0)" onclick="hideOrShowControls(this)">隐藏/显示</a>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
    function playOrPaused(odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }
//    获取已播放的总长度
    function getCurrentTime(){
        alert(audio.currentTime+"秒")
    }
//    获取音频总时长
    function duration(){
        alert(audio.duration+"秒")
    }
//    对浏览器提供的音频控件进行隐藏或显示
    function hideOrShowControls(odj){
        if(audio.controls){
            audio.removeAttribute("controls");
            odj.innerHTML = '显示';
            return;
        }
        audio.controls = 'controls';
        odj.innerHTML = '隐藏'
    }
</script>

6.1.2 可脚本控制的特性值
（1）muted():布尔类型，当它的值为true时开启静音，值为false时，关闭静音。

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls">
</audio>
<a href="javascript:void (0)" onclick="playOrPaused(this)">暂停/播放</a>
<a href="javascript:void (0)" onclick="getCurrentTime()">获取已播放的总时长</a>
<a href="javascript:void (0)" onclick="duration()">获取音频的总时长</a>
<a href="javascript:void (0)" onclick="hideOrShowControls(this)">隐藏/显示</a>
<a href="javascript:void (0)" onclick="muted(this)">开启静音/关闭静音</a>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
    function playOrPaused(odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }
//    获取已播放的总长度
    function getCurrentTime(){
        alert(audio.currentTime+"秒")
    }
//    获取音频总时长
    function duration(){
        alert(audio.duration+"秒")
    }
//    对浏览器提供的音频控件进行隐藏或显示
    function hideOrShowControls(odj){
        if(audio.controls){
            audio.removeAttribute("controls");
            odj.innerHTML = '显示';
            return;
        }
        audio.controls = 'controls';
        odj.innerHTML = '隐藏'
    }
    //    开启或者关闭静音
    function muted(obj){
        if(audio.muted){
            audio.muted = false;
            obj.innerHTML = '开启静音';
            return;
        }else{
            audio.muted = true;
            obj.innerHTML = '关闭静音'
        }
    }
</script>

（2）vol：通过改变函数中定义的volume的值来控制音量的大小
Volume范围：0.0-1.0 超出范围就会报错。

<body>
<audio id="audio" src="files/荣耀.mp3" controls="controls">
</audio><br>
<a href="javascript:void (0)" onclick="playOrPaused(this)">暂停/播放</a><br>
<a href="javascript:void (0)" onclick="getCurrentTime()">获取已播放的总时长</a><br>
<a href="javascript:void (0)" onclick="duration()">获取音频的总时长</a><br>
<a href="javascript:void (0)" onclick="hideOrShowControls(this)">隐藏/显示</a><br>
<a href="javascript:void (0)" onclick="muted(this)">开启静音/关闭静音</a><br>
<input type="button" value="+" onclick="vol('up')">音量
<input type="button" value="-" onclick="vol('down')">
当前音量：<span id="nowVol"></span>
</body>
<script>
    var audio;
    window.onload = function () {
        initAudio();
    };
    var initAudio = function () {
//        获取audio
        audio = document.getElementById("audio")
    };
//    播放或暂停
    function playOrPaused(odj) {
        if (audio.paused) {
            audio.play();
            odj.innerHTML = '暂停';
            return;
        }
        audio.pause();
        odj.innerHTML = '播放'
    }
//    获取已播放的总长度
    function getCurrentTime(){
        alert(audio.currentTime+"秒")
    }
//    获取音频总时长
    function duration(){
        alert(audio.duration+"秒")
    }
//    对浏览器提供的音频控件进行隐藏或显示
    function hideOrShowControls(odj){
        if(audio.controls){
            audio.removeAttribute("controls");
            odj.innerHTML = '显示';
            return;
        }
        audio.controls = 'controls';
        odj.innerHTML = '隐藏'
    }
    //    开启或者关闭静音
    function muted(obj){
        if(audio.muted){
            audio.muted = false;
            obj.innerHTML = '开启静音';
            return;
        }else{
            audio.muted = true;
            obj.innerHTML = '关闭静音'
        }
    }
//    ff
    function vol(type){
        if(type == 'up'){//加音量
            var volume = audio.volume += 0.1;
            if(volume >= 1){
                volume = 1;
            }
            audio.volume = volume;
        }else{//减音量
            var volume = audio.volume -= 0.1;
            if(volume <= 0){/*最小值为零*/
                volume = 0;
            }
            audio.volume = volume;
        }
        document.getElementById("nowVol").innerHTML = round(audio.volume);
    }
    function round(value){
//        将音量的值转化为浮点数并四舍五入
        value = Math.round(parseFloat(value)*10)/10;
        if(value.toString().indexOf(".") < 0){
            value = value.toString() + ".0";
        }
        return value;
    }
</script>

6.2 video

标签属性：

<body>
<video src="files/mov_bbb.mp4" preload="auto" loop poster="files/poster.png" width="300" height="200" controls="controls"></video><br>
</body>

（1）src()：本地视频文件的地址（也可以是网址）
（2）controls由浏览器提供的视频控件
（3）preload：预加载，让文件预先进行缓存，优化播放速度。
三个可选值：auto对整个视频文件进行加载默认值；
metadata只加载文件的元数据（第一帧，播放总时长，播放列表等）
（4）loop：循环播放，布尔类型在标签使用时默认为true
（5）autoplay自动播放，布尔类型在标签使用时默认为true
（6）poster()：给视频设置第一帧（封面）。括号内容写图片的路径内容。
（7）width、height设置视频的宽度和高度

常用的方法：

（1）playBySeconds()：通过改变currentTime的值设置视频开始播放的位置（播放点）。

<body>
<video id="video" src="files/mov_bbb.mp4" preload="auto" loop poster="files/poster.png" width="300" height="200" controls="controls"></video><br>
<button onclick="playBySeconds()">设置播放点</button>
</body>
<script>
var video = document.getElementById("video");
    function playBySeconds(){
        video.currentTime = 5
    }
</script>

（2）setPlaySpeed()：通过改变playbackRate的值来设置视频的播放速度。

<body>
<video id="video" src="files/mov_bbb.mp4" preload="auto" loop poster="files/poster.png" width="300" height="200" controls="controls"></video><br>
<button onclick="playBySeconds()">设置播放点</button>
<button onclick="setPlaySpeed()">设置播放速度</button>
</body>
<script>
var video = document.getElementById("video");
    function playBySeconds(){
        video.currentTime = 5;
    }
    function setPlaySpeed(){
        video.playbackRate = 2;
    }
</script>

（3）duration():返回视频的总长度

<body>
<video id="video" src="files/mov_bbb.mp4" preload="auto" poster="files/poster.png" width="300" height="200" controls="controls"></video><br>
<button onclick="playBySeconds()">设置播放点</button>
<button onclick="setPlaySpeed()">设置播放速度</button>
<button onclick="duration()">获取视频的总时长</button>
</body>
<script>
var video = document.getElementById("video");
//设置播放点
    function playBySeconds(){
        video.currentTime = 5;
    }
//设置播放速度
    function setPlaySpeed(){
        video.playbackRate = -2;
    }
//获取视频的总时长
    function duration(){
        alert(video.duration);
    }
   </script>

（4）onended：当视频播放完成后触发的事件

<body>
<video id="video" src="files/mov_bbb.mp4" preload="auto" poster="files/poster.png" width="300" height="200" controls="controls"></video><br>
<button onclick="playBySeconds()">设置播放点</button>
<button onclick="setPlaySpeed()">设置播放速度</button>
<button onclick="duration()">获取视频的总时长</button>
</body>
<script>
var video = document.getElementById("video");
//设置播放点
    function playBySeconds(){
        video.currentTime = 5;
    }
//设置播放速度
    function setPlaySpeed(){
        video.playbackRate = -2;
    }
//获取视频的总时长
    function duration(){
        alert(video.duration);
    }

    video.onended = function(){
        alert("视频播放完成")
    }
</script>

音频和视频处理 6

6.1 audio

6.2 video

工作中用到的脚本合集

24-5-18 X

JS函數6

JS循環結構5

JS程序設計基礎2

CSS基礎知識1

CSS選擇器3

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結