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> 

我已經實現了它的反應終極版

<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設置它在。

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。