video 音頻的使用( video.min.js)


(1)、常用配置選項

autoplay: false, //自動播放:true/false
controls: true, //是否顯示底部控制欄:true/false
width: 300, //視頻播放器顯示的寬度
height: 300, //視頻播放器顯示的高度
loop: false, //是否循環播放:true/false
muted: false, //設置默認播放音頻:true/false
poster:"", //視頻開始播放前顯示的圖像的URL。這通常是一個幀的視頻或自定義標題屏幕。一旦用戶點擊“播放”圖像就會消失
src:"", //要嵌入的視頻資源url,The source URL to a video source to embed.
techOrder: ['html5', 'flash'], //使用播放器的順序,下面的示例說明優先使用html5播放器,如果不支持將使用flash
notSupportedMessage: false, //是否允許重寫默認的消息顯示出來時,video.js無法播放媒體源
plugins: {}, //插件
sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //資源文件等價於html中的形式source標簽
aspectRatio:"1:1" //將播放器置於流體模式下,計算播放器動態大小時使用該值。
//該值應該是比用冒號隔開的兩個數字(如“16:9”或“4:3”)。
fluid: false, //是否自適應布局,播放器將會有流體體積。換句話說,它將縮放以適應容器。
// 如果<video>標簽有“vjs-fluid”樣式時,這個選項會自動設置為true。
preload: "metadata", //建議瀏覽器是否在加載<video>元素時開始下載視頻數據。(預加載)
//auto:立即加載視頻(如果瀏覽器支持它)。一些移動設備將不會預加載視頻,以保護用戶的帶寬/數據使用率。這就是為什么這個值被稱為“自動”,而不是更確鑿的東西
// metadata:只加載視頻的元數據,其中包括視頻的持續時間和尺寸等信息。有時,元數據會通過下載幾幀視頻來加載。
//none

(2)、常用事件

this.on('suspend', function() {//延遲下載
console.log("延遲下載")
});
this.on('loadstart', function() { //客戶端開始請求數據
console.log("客戶端開始請求數據")
});
this.on('progress', function() {//客戶端正在請求數據
console.log("客戶端正在請求數據")
});
this.on('abort', function() {//客戶端主動終止下載(不是因為錯誤引起)
console.log("客戶端主動終止下載")
});
this.on('error', function() {//請求數據時遇到錯誤
console.log("請求數據時遇到錯誤")
});
this.on('stalled', function() {//網速失速
console.log("網速失速")
});
this.on('play', function() {//開始播放
console.log("開始播放")
});
this.on('pause', function() {//暫停
console.log("暫停")
});
this.on('loadedmetadata', function() {//成功獲取資源長度
console.log("成功獲取資源長度")
});
this.on('loadeddata', function() {//渲染播放畫面
console.log("渲染播放畫面")
});
this.on('waiting', function() {//等待數據,並非錯誤
console.log("等待數據")
});
this.on('playing', function() {//開始回放
console.log("開始回放")
});
this.on('canplay', function() {//可以播放,但中途可能因為加載而暫停
console.log("可以播放,但中途可能因為加載而暫停")
});
this.on('canplaythrough', function() { //可以播放,歌曲全部加載完畢
console.log("可以播放,歌曲全部加載完畢")
});
this.on('seeking', function() { //尋找中
console.log("尋找中")
});
this.on('seeked', function() {//尋找完畢
console.log("尋找完畢")
});
this.on('timeupdate', function() {//播放時間改變
console.log("播放時間改變")
});
this.on('ended', function() {//播放結束
console.log("播放結束")
});
this.on('ratechange', function() {//播放速率改變
console.log("播放速率改變")
});
this.on('durationchange', function() {//資源長度改變
console.log("資源長度改變")
});
this.on('volumechange', function() {//音量改變
console.log("音量改變")
});

 

3、常用方法

播放:myPlayer.play();
暫停:myPlayer.pause();
獲取播放進度:var whereYouAt = myPlayer.currentTime();
設置播放進度:myPlayer.currentTime(120);
視頻持續時間,加載完成視頻才可以知道視頻時長,且在flash情況下無效: var howLongIsThis = myPlayer.duration();
緩沖,就是返回下載了多少: `var whatHasBeenBuffered = myPlayer.buffered();
百分比的緩沖: var howMuchIsDownloaded = myPlayer.bufferedPercent();
聲音大小(0-1之間): var howLoudIsIt = myPlayer.volume();
設置聲音大小: myPlayer.volume(0.5);
取得視頻的寬度: var howWideIsIt = myPlayer.width();
設置寬度:myPlayer.width(640);
獲取高度: var howTallIsIt = myPlayer.height();
設置高度:: myPlayer.height(480);
一步到位的設置大小:myPlayer.size(640,480);
全屏: myPlayer.enterFullScreen();
離開全屏 : myPlayer.enterFullScreen();

4、網絡狀態

myPlayer.currentSrc; //返回當前資源的URL
myPlayer.src = value; //返回或設置當前資源的URL
myPlayer.canPlayType(type); //是否能播放某種格式的資源
myPlayer.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源
myPlayer.load(); //重新加載src指定的資源
myPlayer.buffered; //返回已緩沖區域,TimeRanges
myPlayer.preload; //none:不預載 metadata:預載資源信息 auto:立即加載視頻

(5)、播放狀態

myPlayer.currentTime = value; //當前播放的位置,賦值可改變位置
myPlayer.startTime; //一般為0,如果為流媒體或者不從0開始的資源,則不為0
myPlayer.duration; //當前資源長度 流返回無限
myPlayer.paused; //是否暫停
myPlayer.defaultPlaybackRate = value;//默認的回放速度,可以設置
myPlayer.playbackRate = value;//當前播放速度,設置后馬上改變
myPlayer.played; //返回已經播放的區域,TimeRanges,關於此對象見下文
myPlayer.seekable; //返回可以seek的區域 TimeRanges
myPlayer.ended; //是否結束
myPlayer.autoPlay; //是否自動播放
myPlayer.loop; //是否循環播放

(6)、視頻控制

myPlayer.controls;//是否有默認控制條
myPlayer.volume = value; //音量
myPlayer.muted = value; //靜音
TimeRanges(區域)對象
TimeRanges.length; //區域段數
TimeRanges.start(index) //第index段區域的開始位置
TimeRanges.end(index) //第index段區域的結束位置

 

使用例子:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>電視台</title>
    <!--引入video.js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link href="videojs/css/video-js.css" rel="stylesheet" type="text/css">
    <script src="videojs/js/video.min.js"></script>
</head>

<body>
    <section id="videoPlayer">
        <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered">
            <source src="test.mp4" type="video/mp4">
        </video>
    </section>
    <br />
    <button class="control" onclick='operation("play")'>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("stop")'>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("reload")'>重載</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("reset")'>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("fastForward")'>快進</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("back")'>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("volumeUp")'>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("volumeUp")'>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("fullScreen")'>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='operation("exitFullScreen")'>退出全屏</button><br /><br /><br />
    <button class="control" onclick='cut("CCTV1")'>CCTV1高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='cut("CCTV3")'>CCTV3高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='cut("CCTV6")'>CCTV6高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='cut("XHWS")'>香港衛視</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='cut("MGZW")'>美國中文電視</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick='cut("ocean")'>海洋</button>&nbsp&nbsp&nbsp&nbsp&nbsp

    <script type="text/javascript">
        //          video標簽id,
        //          配置選項(data-setup='{}'),
        //          videojs初始化完成回調函數
        var myPlayer = videojs('example-video', {
            "width": "1000",
            "height": "600",
            "poster": "",
            "controls": true,
            "autoplay": false,
            "techOrder": ["html5", "flash"],
            "loop": false,
            "muted": false,
            "preload": 'metadata'
        }, function onPlayerReady() {
            var myPlayer = this;
            //在回調函數中,this代表當前播放器,
            //可以調用方法,也可以綁定事件。
            /**
             * 事件events    綁定事件用on    移除事件用off
             */
            this.on('suspend', function () {//延遲下載
                console.log("延遲下載")
            });
            this.on('loadstart', function () { //客戶端開始請求數據
                console.log("客戶端開始請求數據")
            });
            this.on('progress', function () {//客戶端正在請求數據
                console.log("客戶端正在請求數據")
            });
            this.on('abort', function () {//客戶端主動終止下載(不是因為錯誤引起)
                console.log("客戶端主動終止下載")
            });
            this.on('error', function () {//請求數據時遇到錯誤
                console.log("請求數據時遇到錯誤")
            });
            this.on('stalled', function () {//網速失速
                console.log("網速失速")
            });
            this.on('play', function () {//開始播放
                console.log("開始播放")
            });
            this.on('pause', function () {//暫停
                console.log("暫停")
            });
            this.on('loadedmetadata', function () {//成功獲取資源長度
                console.log("成功獲取資源長度")
            });
            this.on('loadeddata', function () {//渲染播放畫面
                console.log("渲染播放畫面")
            });
            this.on('waiting', function () {//等待數據,並非錯誤
                console.log("等待數據")
            });
            this.on('playing', function () {//開始回放
                console.log("開始回放")
            });
            this.on('canplay', function () {//可以播放,但中途可能因為加載而暫停
                console.log("可以播放,但中途可能因為加載而暫停")
            });
            this.on('canplaythrough', function () { //可以播放,歌曲全部加載完畢
                console.log("可以播放,歌曲全部加載完畢")
            });
            this.on('seeking', function () { //尋找中
                console.log("尋找中")
            });
            this.on('seeked', function () {//尋找完畢
                console.log("尋找完畢")
            });
            this.on('timeupdate', function () {//播放時間改變
                console.log("播放時間改變")
            });
            this.on('ended', function () {//播放結束
                console.log("播放結束")
            });
            this.on('ratechange', function () {//播放速率改變
                console.log("播放速率改變")
            });
            this.on('durationchange', function () {//資源長度改變
                console.log("資源長度改變")
            });
            this.on('volumechange', function () {//音量改變
                console.log("音量改變")
            });
        });
        /**
         * 方法
         */
        function operation(param) {
            console.log(param)
            if ("play" == param) {  //開始播放
                myPlayer.play();
                playState();
            } else if ("stop" == param) {   //停止播放
                myPlayer.pause();
            } else if ("fastForward" == param) { //快進
                var whereYouAt = myPlayer.currentTime();
                myPlayer.currentTime(10 + whereYouAt);
            } else if ("reload" == param) { //重新加載
                myPlayer.pause();
                myPlayer.load();
                myPlayer.play();
            } else if ("back" == param) {   //后退
                var whereYouAt = myPlayer.currentTime();
                myPlayer.currentTime(whereYouAt - 10);
            } else if ("fullScreen" == param) { //全屏
                myPlayer.enterFullScreen();
            } else if ("exitFullScreen" == param) { //退出全屏
                myPlayer.enterFullScreen();
            } else if ("volumeUp" == param) {   //音量加
                var howLoudIsIt = myPlayer.volume();
                myPlayer.volume(howLoudIsIt + 0.1);
            } else if ("volumeDown" == param) { //音量減
                var howLoudIsIt = myPlayer.volume();
                myPlayer.volume(howLoudIsIt - 0.1);
            } else if ("reset" == param) {  //重置,視頻不會播放
                myPlayer.reset();
            }
        }
        function cut(channel) {
            myPlayer.reset();//重置
            if ("CCTV1" == channel) {   //CCTV1
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8");
                myPlayer.play();
            } else if ("CCTV3" == channel) {    //CCTV3
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8");
                myPlayer.play();
            } else if ("CCTV6" == channel) {    //CCTV6
                myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" });
                myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8");
                myPlayer.play();
            } else if ("XHWS" == channel) { //香港衛視
                myPlayer.src({ type: "rtmp/flv", src: "rtmp://live.hkstv.hk.lxdns.com/live/hks1" });
                myPlayer.load("rtmp://live.hkstv.hk.lxdns.com/live/hks1");
                myPlayer.play();
            } else if ("MGZW" == channel) { //美國中文電視
                myPlayer.src({ type: "rtmp/flv", src: "rtmp://media3.sinovision.net:1935/live/livestream" });
                myPlayer.load("rtmp://media3.sinovision.net:1935/live/livestream");
                myPlayer.play();
            } else if ("ocean" == channel) {    //官方案例
                myPlayer.src({ type: "video/mp4", src: "http://vjs.zencdn.net/v/oceans.mp4" });
                myPlayer.load("http://vjs.zencdn.net/v/oceans.mp4");
                myPlayer.play();
            }
        }
    </script>

</body>

</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM