Question

我们正在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)
        })
    }

Answer 1

如果您将其导入，似乎无法使用。我不喜欢我做的事，但是可以用。

需要在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
    })
    
  }

在渲染功能中，您只需定义视频标签的ID（与ComponentDidMount上的ID相同）
如果没有播放器源，则广告将不会开始播放。

带有Google IMA插件的reactJS中的VideoJS

1 个答案: