reactjs e不是函数

时间:2018-08-20 11:27:42

标签: reactjs webpack react-redux video.js

此typeError:e不是函数;已经毁了我的全部,我正在使用video.js和videojs-ima在我的视频播放器上投放广告。当我使用“调试”进行构建时,它运行得非常好,但是当我使用生产环境进行构建时,它没有进行调试,而是显示了下面显示的错误,请帮帮我。

P.S:我也在使用Webpack构建系统

I'm facing error (TypeError: SnapShot)

import React from 'react';
import $ from 'jquery';
import * as dialogActions from '../../actions/dialogActions'
import videojs from 'video.js';
import 'videojs-contrib-dash'
import 'videojs-contrib-hls'
import '../../bootstrap/js/videojs-contrib-ads';
import 'videojs-ima'
import '../../bootstrap/css/videojs-contrib-ads.css'
import '../../bootstrap/css/video-js.css'
export default class VideoPlayer extends React.Component {
  componentDidMount() {
    window.scrollTo(0, 0); //this code is represent the scroll to top
    let video =  document.getElementById("contentVideo");
    this.player = videojs(video, this.props, function onPlayerReady() {});
    console.log(this.player);
    this.player.ima({
      id: 'contentVideo',
      adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/3924359tput=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=[timestamp]',
      adsManagerLoadedCallback: () => {
        var events = [google.ima.AdEvent.Type.ALL_ADS_COMPLETED
          ,google.ima.AdEvent.Type.CLICK
          ,google.ima.AdEvent.Type.COMPLETE
          ,google.ima.AdEvent.Type.FIRST_QUARTILE
          ,google.ima.AdEvent.Type.LOADED
          ,google.ima.AdEvent.Type.MIDPOINT
          ,google.ima.AdEvent.Type.PAUSED
          ,google.ima.AdEvent.Type.STARTED
          ,google.ima.AdEvent.Type.THIRD_QUARTILE];
        for (var index = 0; index < events.length; index++) {
          if (events[index] === google.ima.AdEvent.Type.CLICK){
            this.player.ima.addEventListener(events[index],(e) => {
              return false;
            });
          }
          
          if(events[index] === google.ima.AdEvent.Type.COMPLETE || events[index] === google.ima.AdEvent.Type.ALL_ADS_COMPLETED){
            this.player.ima.addEventListener(events[index],(e) => {
              this.player.play(); 
              if (this.props.download !== "" && this.props.download !== undefined){
                window.open(this.props.download, "_blank");
                dialogActions.setModal(this.props.dispatch, false,"","");
              } else {
                dialogActions.setText(this.props.dispatch, "Video has been started");
              }
            });
          }
        }
      }
    });

    // this.player.ima.requestAds();
    // this.player.hasAttribute('controls')
    if ((navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/Android/i))) {
        // this.player.removeAttribute('controls');
    }

    var startEvent = 'click';
    if (navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/Android/i)) {
      startEvent = 'touchend';
    }

    this.player.one(startEvent, function () {
      // console.warn(this.player);
      if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
        this.player().ima.initializeAdDisplayContainer();
      }
      this.player().play();
      this.player().pause();

    });
    this.player.on("ready", function(){
      this.player().play();
    });
  }
  
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

  end(){
    // console.log("ended");
    this.ended = true;
    this.player.bigPlayButton.show();
  }

  play(){
    if(this.ended == true){
      // console.log("replay");
      this.props.onReplay();
      // this.player.ima.requestAds();
      // if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
      //   this.player.ima.initializeAdDisplayContainer();
      // }
      // // this.player.play();
      // this.player.pause();
      // this.ended = false;  
      // return false;
    }
    // console.log("play");
  }
  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
      return (
        <div data-vjs-player>
          <video id='contentVideo' ref={node => this.videoNode = node} onPlay={this.play.bind(this)} onEnded={this.end.bind(this)} className="video-js" controls="true"></video>
        </div>
      );
  }
}

0 个答案:

没有答案