浏览器视频播放插件 video.min.js 使用实例

最新推荐文章于 2024-08-08 08:29:14 发布

敲代码的大雄

最新推荐文章于 2024-08-08 08:29:14 发布

阅读量2.1k

点赞数 1

分类专栏：学习笔记插件使用文章标签： javascript css jquery

本文链接：https://blog.csdn.net/qq_34217386/article/details/118015857

版权

学习笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

插件使用

4 篇文章 0 订阅

订阅专栏

浏览器视频播放插件 video.min.js 使用实例

video.min.js插件下载

页面引入插件

<link rel="stylesheet" th:href="@{/static/css/video-js.min.css}">
<script th:src="@{/static/js/video.min.js}"></script>

页面中使用demo

<!--
 poster=" " 设置封面图
 preload="auto" 预加载
 vjs-big-play-centered 类， 控制按钮居中显示
 data-setup="{ }"  使控件样式发生改变
 -->
<video id="video" class="video-js vjs-default-skin vjs-big-play-centered" poster="/static/images/banner.png" controls preload="auto" width="372" height="223" data-setup='{"example_option":true}'>
    <source th:src="@{/static/video/testVideo.mp4}" type='video/mp4' />
</video>

可通过 js 对视频属性进行设置

	var myvideo=videojs("video");

    //设置宽
    myvideo.width(500);
    //设置高
    myvideo.height(500);

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

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

    myvideo.ready(function(){
        console.log("已就绪");
        console.log("视频已缓冲"+this.buffered());
    });

    //绑定在window上，点击可获取当前时间进度
    onclick=function(){
        console.log(myvideo.currentTime());
        console.log("视频总时长"+myvideo.duration());
    };

    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("视频跳转中");
    });