首页 > 代码库 > video.js学习笔记

video.js学习笔记

2024-11-15 06:05:02   203人阅读

　　在开发的项目中，有视频播放这个功能，找了好多前端的插件，最后决定时用video.js 。

　　什么是video.js？

　　video.js是一个开源的HTML5  jquery 视频插件，这个插件可以用来处理Flash 视频，也可以很好的支持H5，它还是一个多平台支持的产品。

　　video.js的优点

  • 它是开源免费的，可以在github很容易的获取到最新的源码。
  • 使用起来非常容易，只要花几秒中就可以夹起一个视频播放页面。
  • 它几乎兼容所有的浏览器，并且优先使用HTML5，在不支持的浏览器中，会自动生成Falsh进行播放。
  • 纯js和css打造，使用最广泛的前端视频播放插件，说明文档详细，学习起来比较容易。

　　话不多说，代码里面的注释都很全，video.js中的api我也是了解的不是很多，在以后的具体项目中再学习记录。

　　

技术分享 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>video.js 学习2017-7-28</title>
    <!-- <script src="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="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-default-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-default-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="http://www.mamicode.com/1.webm" type="video/webm">
        <source src="http://www.mamicode.com/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; i<videos.length; 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学习笔记


联系
我们