video.js学习笔记

!DOCTYPE html
html
  head
    meta charset="utf-8"
    titlevideo.js 学习2017-7-28/title
    !-- script src="/upload/attach/blank.gif"  data-echo="https://code.jquery.com/jquery-3.1.1.min.js"/script --
    link href="css/video-js.css" rel="stylesheet"
    script src="https://code.jquery.com/jquery-3.1.1.min.js"/script
    script src="http://vjs.zencdn.net/5.18.4/video.min.js"/script
    !-- 如果要支持 IE8 --
    !-- script src="/upload/attach/blank.gif"  data-echo="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"/script --
    style media="screen"
    .video-div{
      width: 400px;
      height: 200px;
      margin: 80px auto;
    }
    .video-js .vjs-tech {
      /*这行代码最为关键,这样视频播放器的外层容器都由视频内容本身撑大*/
      position: relative;
    }
    /* 设置暂停时中间的显示的播放按钮! */
      vjs-paused .vjs-big-play-button,
      .vjs-paused.vjs-has-started .vjs-big-play-button {
      display: block;
      }
      /* 设置video 圆角 */
      #myVideo1{
        border-radius: 10px;
      }
      /* 设置播放按钮,矩形变 圆形 */
      .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;
      }
       /**/
      .vjs-has-started .vjs-control-bar{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }


    /style
  /head
  body
    div
      我是文字
    /div
    div class="video-div"
      !-- controls 设置或返回视频应该显示的控件,比如:暂停、播放 html5的新特性  --
      !--
        preload 是否在页面加载后再入视频  html5新特性
        preload="auto" 当页面加载后载入整个视频
        preload="meta" 当页面加载后载入元数据
        preload="none" 当页面加载后不载入视频
      --
      !--
       poster 视频加载时显示的图像,或者在用户点击播放之前显示的图片
       如果未设置,使用视频的第一帧来代替  html5新特性
       poster="URL";
       --
       !--
       必须项
       data-setup: 是json的数据格式,页面准备完成时自动加载,如果要强制在pc端使用 flash播放,
       则有两种途径:1.通过 html的 data-setup=‘{ "techOrder":["flash", "html5"] }‘
       2.通过js video("myVideo1",{"techOrder":["flash", "html5"]},function(){
       // 第一个参数:video的id  二. 设置当前data-setup属性,也可以为 {}, 三. 执行的方法
         })
      --
      !--
      class说明:
      video-js 应用所需的 Video.js 功能,如全屏和字幕样式。 必须项
      vjs-defau< -skin 为 HMTL 控制条应用默认的皮肤,可以被移除或重写,以创建你自己的控制条样式。
       --
       !--
       source 标签为媒介元素(video、audio)定义媒介资源
       标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
       属性:
       src :规定媒介文件的URl
       type:规定媒体资源的 MIME 类型。
       preload="meta"
        --
      video id="myVideo1" controls preload="auto"  data-setup="{}"  poster="00.jpg"
        class="video-js vjs-defau< -skin vjs-big-play-centered" width="400" height="200"
        !-- 没有设置长和高 默认 1920 * 1080 --
        !-- source 默认加载 一个文件资源 --
        source src="1.mp4" type="video/webm"
        source src="2.mp4" type="video/mp4"
        !-- source src="/upload/attach/blank.gif"  data-echo="1.webm" type="video/webm"
        source src="/upload/attach/blank.gif"  data-echo="1.ogv" type=‘video/ogg‘ / --
      /video
    /div
    div
      参看文献
        a href="http://www.awaimai.com/2053.html"/a
        a href="http://blog.csdn.net/ly115176236/article/details/50977127"/a
        a href="http://blog.csdn.net/huang100qi/article/details/53405876"/a
        a href="http://www.cnblogs.com/ShaYeBlog/p/7068188.html"/a
        a href="http://www.cnblogs.com/alicePanZ/articles/5676915.html"/a
        a href="http://www.cnblogs.com/xinlinux/p/4365188.html"/a
        a href="http://www.awaimai.com/2053.html"/a
        a href="http://www.cnblogs.com/afrog/p/6689179.html"/a

    /div
    div
      p 常用api /p
      //播放与暂停播放
         myPlayer.play();
        myPlayer.pause();
        //设置/获取视频的当前播放时间
        myPlayer.currentTime();
         myPlayer.currentTime(120);
        //视频总的时常
        myPlayer.duration();
        //获取或设置播放器的视频源
        myPlayer.src();
        myPlayer.src(‘www.baidu.mp4‘)
        //获取或者设置视频播放器的poster 图片
        myPlayer.poster();
        myPlayer.poster(‘xxx.jpg‘);
    /div
  /body
  !-- 设置Falsh播放器的路径,如果浏览器不支持H5,将会使用Falsh: --
    script type="text/javascript"
        videojs.options.flash.swf = "static/video-js/video-js.swf";
     /script
  script
  // 初始化所有的video 标签
  var videos = document.getElementsByTagName(video);
    for(i=0; ivideos.len >h; i++) {
        var video = videos[i];
        if(video.className.indexOf(video-js)  -1) {
            videojs(video.id).ready(function(){
            });
        }
    }

  // 获取视频播放器
  var myPlayer = videojs("myVideo1",{
    "controls": true,
    "autoplay": false,
    "preload": "auto",
    "loop": false,
    controlBar: {
    // captionsButton: false,//用于切换和选择字幕的按钮组件
    chaptersButton: false,//导航与其他语言的其他轨道
    playbackRateMenuButton: true, //用于控制播放速率的组件
    LiveDisplay: true, //显示实时指示器
    subtitlesButton: false, //用于切换和选择字幕的按钮组件
    remainingTimeDisplay: true,//显示视频中剩余的时间
    progressControl: false, // 禁止出现进度条
    //竖着的音量条
    // volumeMenuButton: {
    // inline: false,
    // vertical: true
    // },
    fullscreenToggle: true //切换全屏视频
  },
  mydata: {
             username: xiaoming
         }
  },function(){
    myPlayer.pause(); // 暂停
  })
  // 用js设置资源文件
  // var myPlayer = videojs(‘my-player‘, {
  //   sources: [{
  //     src: ‘//path/to/video.mp4‘,
  //     type: ‘video/mp4‘
  //   }, {
  //     src: ‘//path/to/video.webm‘,
  //     type: ‘video/webm‘
  //   }]
  // });
  //  videojs("myVideo1").ready(function(){
  //    var myPlayer = this;
  //    //myPlayer.play();  //  播放
  //   myPlayer.pause(); // 暂停
  //   var whereYouAt = myPlayer.currentTime();
  //   console.log(whereYouAt);
  //   });
  // 事件关注
   myPlayer.on("play",function(){
     console.log("a");
     var a = myPlayer.currentTime();
    console.log(a);
     // 我是开始播放时的事件
   });
   myPlayer.on("pause",function(){
     // 我是暂停时的事件
   })
   myPlayer.on("ended",function(){
     // 我是结束播放时的事件
   });
  /script
/html

View Code

video.js学习笔记

原文地址:http://www.cnblogs.com/Sabo-dudu/p/7275126.html


最新回复(0)
/jishusUjbdj_2Brhcfb8YP8iMykPHrgsMHejuVucd5UbQ_3D_3D4719241
8 简首页