zoukankan      html  css  js  c++  java
  • Video.js 简单的使用介绍

    vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用:

    引用video-js.cs样式文件和video.js

    <link href="video-js.css" rel="stylesheet" type="text/css">
    <script src="video.js"></script>

    设置flash播放器的路径,如果你的浏览器不支持html5,将会使用flash播放

    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>

    body部分,这里支持三种格式MP4,webm,ogg,也可以设置网络路径,poster:视频的封面图片

    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800"
        poster="http://video-js.zencoder.com/oceans-clip.png"
        data-setup="{}">
        <source src="wangmaohuijieshao.mp4" type='video/mp4' />
        <!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />-->
        <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
        <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    </video>

    自动播放:

    <script type="text/javascript">
        var myPlayer = videojs('example_video_1');
        videojs("example_video_1").ready(function () {
            var myPlayer = this;
            myPlayer.play();
        });
    </script>

    一些参数:

    var myPlayer = videojs(“example_video_1″);//获取对象,example_video_1就是video标签的id值 
    myPlayer.play();//播放
    myPlayer.pause();//暂停
    var whereYouAt = myPlayer.currentTime();//获取播放进度:
    myPlayer.currentTime(120);//设置播放进度:
    var howLongIsThis = myPlayer.duration();//视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
    var whatHasBeenBuffered = myPlayer.buffered();//缓冲,就是返回下载了多少
    var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的缓冲
    var howLoudIsIt = myPlayer.volume();//获取声音大小
    myPlayer.volume(0.5);//设置声音大小(0-1之间)
    var howWideIsIt = myPlayer.width();//取得视频的宽度
    myPlayer.width(640);//设置宽度
    var howTallIsIt = myPlayer.height();//获取高度
    myPlayer.height(480);//设置高度:
    myPlayer.size(640,480);//一步到位的设置大小:
    myPlayer.enterFullScreen();//全屏
    
    //自定义事件
    var myFunc = function(){
    // Do something when the event is fired
    };
    //添加事件
    myPlayer.addEvent(“eventName”, myFunc);
    //删除事件
    myPlayer.removeEvent(“eventName”, myFunc);
  • 相关阅读:
    Stalstack 连接管理配置
    Stalstack 安装
    Apache 错误整理
    Apache 服务常用命令
    Apache 优化
    Shell 常用技巧
    Nginx+keepalived做双机热备加tomcat负载均衡
    用Lighttpd做图片服务器
    rsync是类unix系统下的数据镜像备份工具
    redis+keeplived分布式缓存
  • 原文地址:https://www.cnblogs.com/ShaYeBlog/p/7068188.html
Copyright © 2011-2022 走看看