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