react 实例化播放器并切换视频

Question

react 实例化播放器并切换视频

发布于
2017-12-12

需求

需要用react实现一个播放页面，点击播放列表切换视频；
播放列表是视频地址和名称；
播放器js库与播放地址是相关的，所以无法更换；

// 播放器实例化流程

<video id="myPlayer" poster="[这里可以填入封面图片URL]" controls playsInline webkit-playsinline [autoplay]>
    <source src="[这里填入从开放平台官网获取到的RTMP协议URL]" type="" />
    <source src="[这里填入从开放平台官网获取到的HLS协议URL]" type="application/x-mpegURL" />
</video>

<script>
var player = new EZUIPlayer('myPlayer');
</script>

遇到的问题

播放器对象没有切换视频源的方法，播放器实例化之后对应的video标签结构也发生了如下变化，所以无法通过直接改变<source src=''>方式切换视频。
请问在react中如何实现切换视频操作？（除了视频，在react中如何使用类似的需要实例化的库）

<div id="myPlayer">
<object pluginspage="http://www.macromedia.com/go/getflashplayer" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=11,3,0,0" width="396px" height="250px" id="myPlayerflashId" name="myPlayerflashId" align="middle"><param name="allowScriptAccess" value="always">
<param name="allowFullScreen" value="true">
<param name="quality" value="high">
<param name="bgcolor" value="#FFF">
<param name="wmode" value="transparent">
<param name="movie" value="https://open.ys7.com/sdk/js/1.1/ckplayer/ckplayer.swf"><param name="flashvars" value="f=rtmp://rtmp.open.ys7.com/openlive/2f50186ee73e4cad8dea30e0df7e4185&amp;c=0&amp;p=1&amp;lv=1&amp;loaded=loadHandler">
<embed allowscriptaccess="always" allowfullscreen="true" quality="high" bgcolor="#FFF" wmode="transparent" src="https://open.ys7.com/sdk/js/1.1/ckplayer/ckplayer.swf" flashvars="f=rtmp://rtmp.open.ys7.com/openlive/2f50186ee73e4cad8dea30e0df7e4185&amp;c=0&amp;p=1&amp;lv=1&amp;loaded=loadHandler" width="396px" height="250px" name="myPlayerflashId" id="myPlayerflashId" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object></div>

想到的思路