brightcove反応中にビデオタグにビデオが表示されない-redux

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> 

は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

instantiate your playerにBrightcoveプレーヤーAPIを使用します。 videoタグは、Brightcoveスクリプトが読み込まれてインスタンス化されていないときは、まだ使用できません。でそれを設定するcomponentDidMountを使用してください。

The bc() method is used. The bc() method is essential when you need to load the player specific JavaScript before the video element is added to the DOM.

また、あなたのためのcomponent that someone else has already builtを使用することを検討してください。