您现在的位置是:首页 > 技术分享

video.js插件简单使用
wangzhen2018-08-08252人围观

    Video.js是一款基于HTML5网络视频播放器,支持html5flash视频

    1、首先文件引入

    文件可以在GitHub下载

    <link rel="stylesheet" href="/css/video-js.min.css">
    <script src="/js/video.min.js"></script>
    <script>
        videojs.options.flash.swf = "/js/video-js.swf";
    </script>

    2、Video标签

    <video id="my-player" class="video-js vjs-big-play-centered" controls preload="auto" poster="1.jpg" data-setup='{}'> /
        <source src="url" type="video/mp4"></source>
    </video>

    3、Js初始化

    var options = {}; 
    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('播放器已经准备好了!');
        var url_start = "url";
        $.post(url, data);
        this.on('ended', function() {
            videojs.log('播放结束触发事件!');
        });
    });

    4、Css样式调优

    /* 点击屏幕播放/暂停 */
    .video-js .vjs-playing .vjs-tech {
        pointer-events: auto;
    }
    
    /* 暂停时显示播放按钮 */
    .vjs-paused .vjs-big-play-button, .vjs-paused.vjs-has-started .vjs-big-play-button {
        display: block;
    }
    
    /* 播放按钮变○圆形 */
    .video-js .vjs-big-play-button{
        font-size: 2.5em;
        line-height: 2.3em;
        height: 2.5em;
        width: 2.5em;
        -webkit-border-radius: 2.5em;
        -moz-border-radius: 2.5em;
        border-radius: 2.5em;
        background-color: #73859f;
        background-color: rgba(115,133,159,.5);
        border-width: 0.15em;
        margin-top: -1.25em;
        margin-left: -1.75em;
    }
    
    /* 中间的播放箭头 */
    .vjs-big-play-button .vjs-icon-placeholder {
        font-size: 1.63em;
    }
    
    /* 加载圆圈 */
    .vjs-loading-spinner {
        font-size: 2.5em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        margin-top: -1em;
        margin-left: -1.5em;
    }

    5、后台上传获取文件相关信息等

    $("#input-video").on("change",function(e){
        var files = e.target.files || e.dataTransfer.files;
        $("#result").text("请稍后……");
        if(files){
            file = files[0];
            fileName = file.name;
            uploadData.push(file);
            var URL = window.URL || window.webkitURL;
            var videoURL = URL.createObjectURL(file);
            var myPlayer =  videojs("video");
            var info = "<p>名称:"+file.name+"</p>";
            info += "<p>大小:"+file.size+"</p>";
            info += "<p>类型:"+file.type+"</p>";
            myPlayer.src(videoURL);  //重置video的src
            myPlayer.load(videoURL);
            myPlayer.width($(window).width());
            $("#video").show();
            myPlayer.play();
            var timeInterval = setInterval(function(){
                if(myPlayer.duration() != 0){
                    info += "<p>时长:<span id='durationlen'>"+myPlayer.duration()+"</span>秒</p>";
                    $("#result").html(info);
                    clearInterval(timeInterval);
                }
            },1000);
        } else {
            alert("不支持");
        }
    })


文章评论