VideoJS в реакции с плагином Google IMA - PullRequest
Новая
       65

VideoJS в реакции с плагином Google IMA

0 голосов
/ 17 сентября 2018

Мы переходим на VideoJS в проекте ReactJS, кажется, что все работает нормально, за исключением плагина Google IMA.

Есть ли какие-либо ресурсы о том, как использовать плагин google-ima в React?https://www.npmjs.com/package/videojs-ima-player

Я получаю 'Uncaught Error: плагин "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)
        })
    }

1 Ответ

0 голосов
/ 26 ноября 2018

Похоже, что это не будет работать, если вы импортируете его.Мне не очень нравится то, что я сделал, но это работает.

  1. Нужно добавить scripts / css в начало index.html 

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

В функции рендеринга вам просто нужно определить идентификатор для видео-тега (такой же, как и в ComponentDidMount)

Объявление не будет запущено, если естьНет источника для игрока.

...