wangzuo / react-videojs

react videojs wrapper
http://wangzuo.github.io/react-videojs/
ISC License
44 stars 19 forks source link

pages and reload #6

Open fortunto2 opened 8 years ago

fortunto2 commented 8 years ago

Hi, how to solve the problem please tell me.

I make a videoportal like YouTube. There is the main video window, and a couple of icons with the recommendations. If you click recommendations, the router switches the pages, but the video is not reloaded. Just shows the old video is not changing.

Need reset source src in videojs?

same problem http://stackoverflow.com/questions/19270361/videojs-how-to-change-video-poster-dynamically http://stackoverflow.com/questions/26255344/reactjs-cant-change-video-and-poster-videojs

fortunto2 commented 8 years ago

look to html

<div style="vertical-align: top; max-width: 100%; min-width: 100%; width: 100%;" id="vjs_video_3" 
class="videojs video-js vjs-default-skin vjs-paused vjs_video_3-dimensions 
vjs-fluid vjs-controls-enabled vjs-workinghover vjs-user-active" 
data-setup="{ &quot;aspectRatio&quot;:&quot;640:360&quot;, &quot;playbackRates&quot;: [1, 1.5, 2] }" 
poster="http://dcr2ej3odfzos.cloudfront.net/247327/baaafoy2_4-12-2-0.mp4.jpg" role="region"
    aria-label="video player">

    <video poster="http://dcr2ej3odfzos.cloudfront.net/248696/baaafqfh.mp4.jpg" data-setup="{ &quot;aspectRatio&quot;:&quot;640:360&quot;, &quot;playbackRates&quot;: [1, 1.5, 2] }" class="vjs-tech" id="vjs_video_3_html5_api" style="vertical-align: top; max-width: 100%; min-width: 100%;
  width: 100%;" src="http://dcr2ej3odfzos.cloudfront.net/247327/baaafoy2_4-12-2-0.mp4">

    <source src="http://dcr2ej3odfzos.cloudfront.net/248696/baaafqfh.mp4" type="video/mp4">

    </video>

<div></div>

  <div class="vjs-poster" tabindex="-1" 
  style="background-image: url(&quot;http://dcr2ej3odfzos.cloudfront.net/247327/baaafoy2_4-12-2-0.mp4.jpg&quot;);">

</div>

.../baaafoy2_4-12-2-0.mp4 - bad, not changed .../248696/baaafqfh.mp4 - right, changed

so .. need change this:


- first div, id=vjs_video_3, poster='...'
- <video src= />
- <div class="vjs-poster" style="background-image: url( ....)" />
fortunto2 commented 8 years ago

solve video src, need solve <div class="vjs-poster" style="background-image: url( ....)" /> update to right url

if using poster

  <Video
              src={fUrl}
              type="video/mp4"
              onPlay={this.handlePlay}
              poster={posterUrl}
              controls
              data-setup='{
                "aspectRatio":"640:360",
                "playbackRates": [1, 1.5, 2],
              }'
            />