我们正在ReactJS项目中迁移到VideoJS,除Google IMA插件外,其他一切似乎都正常运行。
关于如何在React中使用google-ima插件有任何资源吗?
https://www.npmjs.com/package/videojs-ima-player
我在这里收到“未捕获的错误:插件“ ima”不存在”错误
import React from "react";
import videojs from 'video.js'
import 'videojs-ima';
class VideoJS extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
}
generetePlayerOptions = () => {
return (
{
autoplay: true,
controls: true,
language: 'lt',
poster: this.props.playlist[0].image,
aspectRatio: '16:9',
sources: [{
src: this.props.playlist[0].file,
type: 'video/mp4'
}],
plugins: {
ima: {
adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
}
}
}
)
}
componentDidMount() {
// instantiate Video.js
this.player = videojs(this.videoNode, this.generetePlayerOptions(), function onPlayerReady() {
console.log('onPlayerReady', this)
})
}
最佳答案
如果您导入它,它将无法正常工作。
我不太喜欢我所做的事情,但是可以。
需要在index.html的头上添加脚本/ css
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />
<script src="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<script src="videojs.ima.js"></script>
现在,您可以使用“ window.videojs()”获取播放器,并添加带有选项的ima插件。像这样:
componentDidMount() {
var player = window.videojs('content_video', {}, function () {
var options = {
id: 'content_video',
adTagUrl: 'https://pubads.g.doubleclick.....'
};
player.ima(options)
});
player.ready(function () {
player.play() //start on load
})
}
在render函数中,您只需要定义视频标签的ID(与ComponentDidMount上的ID相同)
如果没有播放器来源,则广告将不会开始播放。
关于reactjs - 带有Google IMA插件的ReactJS中的VideoJS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52369979/