node.js OpenCV4 Jenkins Cluster模式 二代征信 uitableview 后台管理网页模板 郑州小程序公司 jquery获取最后一个子元素 bootstrap侧边栏 idea整理代码 java 大文件上传 idea开发python python指数函数 input函数python python正则表达式语法 python怎么使用 java基础 java斐波那契数列 java入门新手教程 java有哪些数据类型 java路径 pushstate gtx1030 福昕阅读器绿色版 修改ip地址软件 pdf密码移除 ug拔模 pr蒙版怎么用 sendto函数 jsp源代码 winhex中文版下载 win7仿win8主题 凯立德下载 wps苹果mac版 c4d序列号 dll注入器 fla文件用什么打开 XR基带 filesaver
当前位置: 首页 > 学习教程  > 编程语言

videojs教程

2020/9/19 14:27:34 文章标签:

https://videojs.com/ 官网
https://github.com/videojs
下载地址
https://github.com/videojs/video.js github 下载地址

首先给video标签加上 video-js 的类

data-setup="{ }" 使控件样式发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

vjs-big-play-centered 类, 控制按钮居中显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

preload=“auto” 预加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="960" height="400" preload="auto">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

poster=" " 设置封面图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
</body>
</html>

videojs是封装好的方法

.ready 表示视频已就绪,类似于 canplay(其实完全不如canplay,下面案例有体现)

.currentTime() 当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");
        myvideo.ready(function(){
            console.log("已就绪");
        });

        //绑定在window上,点击可获取当前时间进度
        onclick=function(){
            console.log(myvideo.currentTime());
        }
    </script>
</body>
</html>

current(time) 设置当前播放时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒处开始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            console.log("已就绪");
        });

        //绑定在window上,点击可获取当前时间进度
        onclick=function(){
            console.log(myvideo.currentTime());
        }
    </script>
</body>
</html>

.duration() 获取视频总时长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒处开始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            //在ready中显示NaN
            console.log(this.duration());
        });

        //绑定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }
    </script>
</body>
</html>

在这里可以看出 ready不如canplay

因为canplay中已经可以获取到总时长,而ready中还是NaN,有点辣鸡啊

buffered() 视频已经缓冲了多少

不在本地测试比较明显

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //100秒处开始播放
        myvideo.currentTime(100);

        myvideo.ready(function(){
            //缓冲
            console.log(this.buffered());
        });

        //绑定在window上
        onclick=function(){
            console.log(myvideo.duration());
        }
    </script>
</body>
</html>

volume() 获取和设置声音

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //获取声音
        console.log(myvideo.volume());

        //设置声音
        myvideo.volume(.5);

        console.log(myvideo.volume());

    </script>
</body>
</html>

width() height() 获取和设置视频的宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        //获取宽高
        console.log(myvideo.width());
        console.log(myvideo.height());

        myvideo.width(300);
        myvideo.height(200);

        console.log(myvideo.width());
        console.log(myvideo.height());

    </script>
</body>
</html>

如何查看更多方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        console.log(myvideo);



    </script>
</body>
</html>

事件监听 on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>videojs</title>
    <link rel="stylesheet" href="video-js.min.css">
</head>
<body>
    <video id="myvideo" class="video-js vjs-big-play-centered" controls data-setup="{}" width="660" height="400" preload="auto" poster="data/poster.jpg">
        <source src="data/imooc.mp4"></source>
    </video>
    
    <script src="video.min.js"></script>
    <script>
        var myvideo=videojs("myvideo");

        myvideo.on("ended",function(){
            console.log("视频播放结束");
        })

        myvideo.on("pause",function(){
            console.log("点击暂停");
        })

        myvideo.on("play",function(){
            console.log("点击播放");
        })

        myvideo.on("volumechange",function(){
            console.log("声音改变");
        })

        myvideo.on("timeupdate",function(){
            console.log("视频播放中");
        })

        myvideo.on("seeked",function(){
            console.log("视频跳转结束");
        })

        myvideo.on("seeking",function(){
            console.log("视频跳转中");
        })



    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <title>https://blog.csdn.net/qq_30282133/article/details/81566273</title>
    <!-- https://blog.csdn.net/qq_30282133/article/details/81566273 -->
    <link href="video-js.css" rel="stylesheet">
    <script src='video.js'></script>
    <script src="video.min.js" type="text/javascript"></script>
<!--    <style type="text/css" src="video-js7.4.1.css" ></style>
    <script type="text/javascript" src = "video/video7.4.1.js" ></script>
    <script type="text/javascript" src = "video/videojs-contrib-hls.min.js" ></script> -->
    
   <!--  
   
     -->
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {position: relative !important;}
        .video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
    </style>
    <div style="width: 400px; height: 350px;" >
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src="https://36421.long-vod.cdn.aodianyun.com/u/36421/m3u8/adaptive/694bd1238e40861c480698cdbf6ca4a9.m3u8" type="application/x-mpegURL"></source>
        </video>
    </div>
    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
 
<script>

 videojs.addLanguage('zh-CN', {
            "Picture-in-Picture" : "画中画",
             "Exit Picture-in-Picture" : "退出画中画",
            "Play": "播放",
            "Pause": "暂停",
            "Current Time": "当前时间",
            "Duration": "时长",
            "Remaining Time": "剩余时间",
            "Stream Type": "媒体流类型",
            "LIVE": "直播",
            "Loaded": "加载完毕",
            "Progress": "进度",
            "Fullscreen": "全屏",
            "Non-Fullscreen": "退出全屏",
            "Mute": "静音",
            "Unmute": "取消静音",
            "Playback Rate": "播放速度",
            "Subtitles": "字幕",
            "subtitles off": "关闭字幕",
            "Captions": "内嵌字幕",
            "captions off": "关闭内嵌字幕",
            "Chapters": "节目段落",
            "Close Modal Dialog": "关闭弹窗",
            "Descriptions": "描述",
            "descriptions off": "关闭描述",
            "Audio Track": "音轨",
            "You aborted the media playback": "视频播放被终止",
            "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
            "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
            "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
            "No compatible source was found for this media.": "无法找到此视频兼容的源。",
            "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。",
            "Play Video": "播放视频",
            "Close": "关闭",
            "Modal Window": "弹窗",
            "This is a modal window": "这是一个弹窗",
            "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
            ", opens captions settings dialog": ", 开启标题设置弹窗",
            ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
            ", opens descriptions settings dialog": ", 开启描述设置弹窗",
            ", selected": ", 选择",
            "captions settings": "字幕设定",
            "Audio Player": "音频播放器",
            "Video Player": "视频播放器",
            "Replay": "重播",
            "Progress Bar": "进度小节",
            "Volume Level": "音量",
            "subtitles settings": "字幕设定",
            "descriptions settings": "描述设定",
            "Text": "文字",
            "White": "白",
            "Black": "黑",
            "Red": "红",
            "Green": "绿",
            "Blue": "蓝",
            "Yellow": "黄",
            "Magenta": "紫红",
            "Cyan": "青",
            "Background": "背景",
            "Window": "视窗",
            "Transparent": "透明",
            "Semi-Transparent": "半透明",
            "Opaque": "不透明",
            "Font Size": "字体尺寸",
            "Text Edge Style": "字体边缘样式",
            "None": "无",
            "Raised": "浮雕",
            "Depressed": "压低",
            "Uniform": "均匀",
            "Dropshadow": "下阴影",
            "Font Family": "字体库",
            "Proportional Sans-Serif": "比例无细体",
            "Monospace Sans-Serif": "单间隔无细体",
            "Proportional Serif": "比例细体",
            "Monospace Serif": "单间隔细体",
            "Casual": "舒适",
            "Script": "手写体",
            "Small Caps": "小型大写字体",
            "Reset": "重启",
            "restore all settings to the default values": "恢复全部设定至预设值",
            "Done": "完成",
            "Caption Settings Dialog": "字幕设定视窗",
            "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
            "End of dialog window.": "结束对话视窗"
        });
 
 

    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
    }
    var src = 'https://36421.long-vod.cdn.aodianyun.com/u/36421/m3u8/adaptive/694bd1238e40861c480698cdbf6ca4a9.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
    })//视频切换
</script>

本文链接: http://www.dtmao.cc/news_show_200102.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?