时间戳

首页 > 解决方案 > 带有谷歌 IMA 插件的 reactJS 中的 VideoJS

reactjs - 带有谷歌 IMA 插件的 reactJS 中的 VideoJS

问题描述

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

标签： reactjsvideo.jsgoogle-ima

解决方案

如果你导入它，它似乎不起作用。我不太喜欢我所做的，但它确实有效。

  1. 需要在 index.html 的头部添加 scripts/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 上的相同）

  2. 如果没有播放器的来源，广告将不会开始。

推荐阅读