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>
posted @   蓝色精灵jah  阅读(759)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示