音頻和視頻處理 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

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以太網驅動總結