videojs中遇到的问题

1、The element or ID supplied is not valid. (videojs)：

报错时页面中的代码顺序:js代码在head部分

<video id="example_video_1" class="video-js" 
      controls preload="none" width="400" height="300"
        poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495886342401&di=af1c695a6acede0df16a3740f6dfec0b&imgtype=0&src=http%3A%2F%2Fatt2.citysbs.com%2Fhangzhou%2F2012%2F03%2F13%2F11%2Fmiddle_112501_kiuuladi_0aebaca9151431903ddb8b31fadc53c0.jpg"
        data-setup="{}">
        <source src="rtmp://pb-fms.chinanews.com.cn/vod/81913_wsj.mp4" type='rtmp/mp4'/>
</video>

  <!-- 如果要支持IE8 -->
  <script src="ie8/videojs-ie8.js"></script>
  <!-- 播放器js -->
  <script src="video.js"></script>
  <script>
      videojs.options.flash.swf = "video-js.swf"; 
     var player = videojs('example_video_1');
     player.ready(function() {
        this.play();
        this.on('ended', function() {
          videojs.log('播放结束了!');
        });
     });
  </script>

通过在网上查阅，将js代码放置在页面底部后问题消失

Moving your script tag to the end of your page, or add an onLoad handler so it fires after the page has loaded.

参考：https://github.com/matthojo/videojs-Background/issues/7

 2、视频没有缩略图：

set preload="auto" and remove  poster=""

参考：https://github.com/videojs/video.js/issues/284

3、视频播放完成后报如下错误：

 4、点击视频缩略图不播放，只点击按钮时播放方法

https://github.com/videojs/video.js/issues/2302

https://jsbin.com/liroja/2/edit?html,js,output

或

使用如下css方法：

.video-js .vjs-tech{pointer-events:none;}

5、自定义videojs组件
http://www.cnblogs.com/afrog/p/6689179.html
http://www.chinanews.com/part/shipin/6/75.html   （跳过开头广告视频，了解详情）

 

// Get the Component base class from Video.js
// 从Videojs中获取一个基础组件
var Component = videojs.getComponent('Component');
// The videojs.extend function is used to assist with inheritance. In
// an ES6 environment, `class TitleBar extends Component` would work
// identically.
// videojs.extend方法用来实现继承，等同于ES6环境中的class titleBar extends Component用法
var TitleBar = videojs.extend(Component, {
  // The constructor of a component receives two arguments: the
  // player it will be associated with and an object of options.
  // 这个构造函数接收两个参数：
  // player将被用来关联options中的参数
  constructor: function(player, options) {
    // It is important to invoke the superclass before anything else, 
    // to get all the features of components out of the box!
    // 在做其它事之前先调用父类的构造函数是很重要的，
    // 这样可以使父组件的所有特性在子组件中开箱即用。
    Component.apply(this, arguments);
  },
  // The `createEl` function of a component creates its DOM element.
  // 创建一个DOM元素
  createEl: function() {
    console.log("createEl:",this.options_);
    var divObj = videojs.dom.createEl('div', {
      // Prefixing classes of elements within a player with "vjs-" 
      // is a convention used in Video.js.
      //给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
      className: 'vjs-title-bar-bg'
    });
    var aObj = videojs.dom.createEl('a', {
      // Prefixing classes of elements within a player with "vjs-" 
      // is a convention used in Video.js.
      //给元素加vjs-开头的样式名，是videojs内置样式约定俗成的做法
      className: 'vjs-title-bar',
      href:this.options_.url,
      target:'_blank'
    });
    videojs.dom.appendContent(aObj, this.options_.text)
    var skipObj = videojs.dom.createEl('span',{
      className: 'vjs-skip-bar'
    });
    videojs.dom.appendContent(skipObj, this.options_.skipText)
    divObj.appendChild(aObj);
    divObj.appendChild(skipObj);
    return divObj;
  }
});
// Register the component with Video.js, so it can be used in players.
// 在videojs中注册这个组件，才可以使用哦.
videojs.registerComponent('TitleBar', TitleBar);

 6、video autoplay不起作用

https://juejin.im/post/5af7129bf265da0b8262df4c
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes