此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>
);
}
}