带有google插件的VideoJS在reactJS中的应用

Question

我们正在迁移到VideoJS的ReactJS项目，一切似乎都很好，除了google插件。

有关于如何使用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

如果你把它导入，它就不能工作了。我不太喜欢我所做的事，但效果很好。

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>

​

1. 现在您可以使用"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
    })
    
  }

​

1. 在呈现函数中，只需定义视频标记的id (与ComponentDidMount上的id相同)
2. 如果没有玩家的消息来源，广告就不会开始。