Question

我最近发现了video.js的videojs-thumbnails插件，我想将它实现到我的角度组件，但是，我一直收到这个错误

VIDEOJS: ERROR: TypeError: Cannot read property 'value' of undefined at Function.updateThumbnailTime

我已经通过

实现了videojs-thumbnails.js

declare var thumbnails: any;

我还确保将videojs-thumbnails导入.angular-clic.json

"styles": [
    "../node_modules/video.js/dist/video-js.css",
    "../node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.css",
    "../node_modules/videojs-thumbnails/dist/browser/videojs-thumbnails.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/video.js/dist/video.js",
    "../node_modules/videojs-resolution-switcher/lib/videojs-resolution-switcher.js",
    "../node_modules/videojs-thumbnails/dist/browser/videojs-thumbnails.js"

通过videojs-thumbnails.js，我一直都会返回错误

VIDEOJS: ERROR: TypeError: Cannot read property 'value' of undefined at Function.updateThumbnailTime

这是完整组件的样子

import { Component, OnInit, OnDestroy, ElementRef, Input } from '@angular/core';

interface VideoJSStatic {
  (id: any, options?: any, ready?: () => void): any;
}

declare var videojs:VideoJSStatic;
declare var videoJsResolutionSwitcher: any;
declare var thumbnails: any;

@Component({
 selector: 'videojs',

  template:`
  <video *ngIf="url" id="video_{{idx}}"
     class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"
     controls preload="auto"  width="640" height="264">
  </video>
  `,
})

export class VideoJsComponent implements OnInit, OnDestroy {

  // reference to the element itself, we use this to access events and methods
  private _elementRef: ElementRef

  // index to create unique ID for component
  @Input() idx: string;

  // video asset url
  @Input() url: any;

  //Video Resolution
  @Input() private options: any = {};
  @Input() private sources: Array<string> = new Array<string>();

  // declare player var
  private player: any; 

  // constructor initializes our declared vars
  constructor(elementRef: ElementRef) {
    this.url = false;
    this.player = false;
  }

  ngOnInit() {}

  ngOnDestroy(){}

 // use ngAfterViewInit to make sure we initialize the videojs element
  // after the component template itself has been rendered
  ngAfterViewInit() {

    //Trial for Video Resoultion
    this.options.plugins = {
      videoJsResolutionSwitcher: {
          default: 'low',
          dynamicLabel: true
      },
    }; 

    // ID with which to access the template's video element
    let el = 'video_' + this.idx;

    // setup the player via the unique element ID
    this.player = videojs(document.getElementById(el),this.options, function() {

      this.updateSrc([
        {
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          label: '1080p'
        },
        {
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          label: '720p'
        },
        {
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          label: '480p'
        },
        {
          src: 'http://vjs.zencdn.net/v/oceans.mp4',
          type: 'video/mp4',
          label: '240p'
        }
      ])
      this.on('resolutionchange', function(){
        console.info('Source changed to %s', this.src())
      });

      //Videojs Thumbnails
      this.thumbnails({
        0: {
          src: 'http://example.com/thumbnail1.png',
          width: '120px'
        },
        5: {
          src: 'http://example.com/thumbnail2.png'
        }
      });

      // Store the video object
      var myPlayer = this, id = myPlayer.id();

      // Make up an aspect ratio
      var aspectRatio = 264/640;

      // internal method to handle a window resize event to adjust the video player
      function resizeVideoJS(){
        var width = document.getElementById(id).parentElement.offsetWidth;
        myPlayer.width(width);
        myPlayer.height( width * aspectRatio );
      }

      // Initialize resizeVideoJS()
      resizeVideoJS();

      // Then on resize call resizeVideoJS()
      window.onresize = resizeVideoJS;

    });
  } 
}

我知道该库已导入，因为如果我放置

import '../../../node_modules/videojs-thumbnails/dist/browser/videojs-thumbnails.js'

进入组件，我收到了一个返回错误：

VIDEOJS: WARN: A plugin named "thumbnails" already exists. You may want to avoid re-registering plugins 我也尝试通过import * as thumbnails from 'videojs-thumbnails';

导入它

对于Angular环境比较新，我已经为这个库尝试了多种导入方法，但它们都会产生相同的结果。我不理解的是，以前的第三方插件名为videoJsResolutionSwitcher以相同的方式导入，我可以调用updateSrc方法而没有任何错误。

另外，我的video.js版本是6.7.3，videojs-resolution-switcher是0.4.3，videojs-thumbnails是版本1.0.3。

Answer 1

这是令人尴尬的，开始的问题是我使用的是不同于我认为已下载的包，因此使用了错误的语法。解决方案是我使用的是此库中不存在的属性。使用.thumbnails（）方法的正确方法是使用

this.thumbnails(
  {
    // width of the single sprite clip 
    width: 100,
    // url to sprite image 
    spriteUrl: "//path/to/sprite.jpg",
    // how often to change thumbnail on timeline ( ex. every 2sec ) 
    stepTime: 2,
  }
);

我以为我使用的是Brightcove的videojs-thumbnails版本。相反，我使用的是来自npm的软件包，这是由其他人编写的，但遗憾的是使用相同的名称而没有明确说明它有很大的不同。此外，我最终使用了一个使用webVTT文件和sprite的不同库。

VIDEOJS：错误：TypeError：无法读取未定义的Angular 5

1 个答案: