带有Google IMA插件的ReactJS中的VideoJS [英] VideoJS in reactJS with google IMA plugin

问题描述

我们正在ReactJS项目中迁移到VideoJS，除Google IMA插件外，其他一切似乎都正常运行.

We're migrating to VideoJS in ReactJS project, everything seems to work fine except for google IMA plugin.

有没有关于如何在React中使用google-ima插件的资源? https://www.npmjs.com/package/videojs-ima-player

Are there any resources on how to use google-ima plugin in React? https://www.npmjs.com/package/videojs-ima-player

我在这里收到未捕获的错误:插件"ima"不存在"错误

I'm getting 'Uncaught Error: plugin "ima" does not exist' error here

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

推荐答案

如果导入，它似乎无法使用. 我不喜欢我的所作所为，但是可以用.

Looks like it won't work if you import it. I don't like too much what i did but it works.

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相同)

1. In the render function you just have to define the id for the video tag (same as the one on ComponentDidMount)

如果没有播放器源，则广告将不会开始播放.

The ad won't start if there is no source for the player.

这篇关于带有Google IMA插件的ReactJS中的VideoJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！