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을 사용하는 것이 좋습니다.