Question

以下是显示视频的示例代码。

<video
  data-video-id="2114345470001"
  data-account="1507807800001"
  data-player="default"
  data-embed="default"
  class="video-js" controls></video>
<script src="//players.brightcove.net/1507807800001/default_default/index.min.js"></script>

我已在react redux

中实现了它

 <div className="bigVideo">
      {
          (currentVideoId) ?  <div><video data-video-id={`${currentVideoId}`} data-account={`${accountId}`} data-player="default" data-embed="default" className="video-js" controls></video><script src={`${playerUrl}?videoId=${currentVideoId}`}></script></div> : ''
      }
 </div>

但它没有显示视频，只是显示播放器。

以下是我已经尝试过的反应但面临问题以获取事件的代码。我点击视频调用此功能。以下是我的全部代码，请检查一下。做完你问的所有事情。

import React, { Component } from 'react'
import ReactSelect from 'common/form-components/select'
import VideoTypes from 'constants/videoTypes'
import { connect } from 'react-redux'
import { fetchVideos } from 'actions/drfVideos'
import AppConstant from 'constants/appConstants'

class DRFTV extends Component {

constructor(props) {
    super(props)

    this.state = {
        videoId: null,
        showAll: false,
        autoPlay: false
    }
    this._toggleVideos = this._toggleVideos.bind(this)
}

componentDidMount(){
    let playListId = (VideoTypes[0]) ? VideoTypes[0]['val'] : null
    this.props.fetchVideos(playListId)
    this.vTag = document.getElementById('myPlayerID');
    this.vTag.setAttribute('data-account',    AppConstant.brightcove.accountId);
    bc(this.vTag);
}

_callback(videoId, autoPlay){
      console.log(this.state.videoId+'auto'+this.state.autoPlay);
      console.log(videoId+''+autoPlay);
      let playerUrl = AppConstant.brightcove.player
      let currentVideoId = videoId
      let playerWithVideoId = playerUrl+'?videoId='+currentVideoId
      let brightCoverUrl = (currentVideoId && autoPlay) ? playerWithVideoId+'&autoPlay=true' : (currentVideoId && !this.state.autoPlay) ? playerWithVideoId : '';
      let myPlayer = '';
       myPlayer.dispose();
      this.vTag.setAttribute('data-video-id', currentVideoId);
      myPlayer = videojs(document.querySelector('.video-js'));
      myPlayer.src({
        "src": brightCoverUrl
      });
      myPlayer.play();
      /*videojs("myPlayerID").on('loadstart',function(){
          myPlayer = this;
          myPlayer.src({
            "src": brightCoverUrl
          });
          myPlayer.play();
      });*/

}

_getVideoList(minNoOfVideos) {
    let drfVideos = this.props.videos

    if(drfVideos){
        let videos = drfVideos.videos.slice(0, minNoOfVideos)
        { this.state.showAll ? videos = drfVideos.videos : videos = drfVideos.videos.slice(0, minNoOfVideos) }

        return _.map(videos, (video, key) => {
            return (
                <li className="clearfix" key={video.id}>
                    <div className="smallVideoContent">
                        <div className="smallVideo">
                            <img src={video.thumbnail}/>
                            <a href="javascript:void(0);" onClick={this._selectVideo.bind(this, video.id, true)} className="videoSmallBtn"/>
                        </div>
                        <a href="javascript:void(0);" className="videoLink" onClick={this._selectVideo.bind(this, video.id, true)}>
                            {video.name}
                        </a>
                    </div>
                </li>
            );
        });
    }else {
        return ''
    }
}

_selectVideo(videoId, autoPlay) {
    this.setState({
        videoId: videoId,
        autoPlay: autoPlay
    });
    this._callback(videoId, autoPlay);
}

render() {
    let minNoOfVideos = 3
    let currentVideoId = this.state.videoId
    let playerUrl = AppConstant.brightcove.player
    let accountId = AppConstant.brightcove.accountId
    let videoList = this._getVideoList(minNoOfVideos)
    let drfVideos = this.props.videos
    let videoTypesProps = {
        options: VideoTypes,
        ref: 'videoTypes',
        onChange: this._changePlaylist.bind(this),
        defaultValue: ''
    }
    if(!currentVideoId && drfVideos && drfVideos.videos && drfVideos.videos[0]){
        currentVideoId =  drfVideos.videos[0].id
    }
    let playerWithVideoId = playerUrl+'?videoId='+currentVideoId
    let brightCoverUrl = (currentVideoId && this.state.autoPlay) ? playerWithVideoId+'&autoPlay' : (currentVideoId && !this.state.autoPlay) ? playerWithVideoId : '';
    return (
        <div>
            <div className="selectVideos">
                <ReactSelect {...videoTypesProps}/>
            </div>
            <div className="videosWrap">
                <div className="bigVideo">
                    {
                      <video id='myPlayerID'  data-video-id={currentVideoId} data-account={accountId} data-player="default" data-embed="default" className="video-js" controls></video>
                    }
                </div>
                <ul className="list-unstyled list-inline videoList">
                    {videoList}
                    {
                        (drfVideos && drfVideos.videos && drfVideos.videos.length > minNoOfVideos) ?
                        <li className="showMoreSmallVideos">
                            <a onClick={this._toggleVideos}>Show {this.state.showAll ? 'Less' : 'More'}</a>
                        </li>
                        : ''
                    }
                </ul>
            </div>
        </div>
    )
  }
}

DRFTV.defaultProps = {
   videos: {
       videos: []
   }
}

const mapStateToProps = (state) => {
   return {
    videos: state.drfVideos.videos
   }
}

const mapDispatchToProps = (dispatch) => {
   return {
     fetchVideos: (playlistId) =>  { dispatch(fetchVideos(playlistId)) }
   }
}

const drfTV = connect(
  mapStateToProps,
  mapDispatchToProps)
(DRFTV)

export default drfTV

Answer 1

将Brightcove播放器API用于instantiate your player。加载Brightcove脚本时，video标记尚不可用，因此未实例化。使用componentDidMount进行设置。

使用bc()方法。当您需要时，bc()方法至关重要在添加视频元素之前加载播放器特定的JavaScript 到DOM。

另外，请考虑为您使用component that someone else has already built。

brightcove视频没有显示在react -redux的视频标签中

1 个答案: