javascript - 将任意脚本标签注入 React 应用程序

问题描述

我想在我的 React 应用程序中嵌入一个StreamingVideoProvider视频播放器，但是：

我无法直接访问视频 URL
我不想绕过他们的 JS 视频播放器，因为它提供了很多功能，如密码保护、字幕和其他我没有找到任何替代方案的功能（所有其他提供密码保护的视频托管服务都不允许我创建任意数量的密码来保护每个视频）
他们不提供任何我可以直接使用的 React 组件

他们提供给我的唯一东西是以下通常进入简单 HTML 页面的嵌入代码：

<!--player code begin-->
<div id="svp_playerdrxtsr0w13c4" style="width:720px;height:810px;position:relative;"></div>
<script language="javascript" type="text/javascript" src="//play.streamingvideoprovider.com/js/dplayer.js"></script>
<script language="javascript">
<!--
var vars = {clip_id:"drxtsr0w13c4",transparent:"true",pause:"1",repeat:"",bg_color:"#ffffff",fs_mode:"2",no_controls:"",start_img:"0",start_volume:"34",close_button:"",brand_new_window:"1",auto_hide:"1",stretch_video:"",player_align:"NONE",offset_x:"0",offset_y:"0",player_color_ratio:0.6,skinAlpha:"50",colorBase:"#250864",colorIcon:"#ffffff",colorHighlight:"#7f54f8",direct:"false",is_responsive:"true",viewers_limit:0,cc_position:"bottom",cc_positionOffset:70,cc_multiplier:0.03,cc_textColor:"#ffffff",cc_textOutlineColor:"#ffffff",cc_bkgColor:"#000000",cc_bkgAlpha:0.1,aspect_ratio:"16:9",play_button:"1",play_button_style:"pulsing",sleek_player:"1",auto_play:"",auto_play_type:"unMute",floating_player:"none"};
var svp_player = new SVPDynamicPlayer("svp_playerdrxtsr0w13c4", "", "100%", "100%", {use_div:"svp_playerdrxtsr0w13c4",skin:"3"}, vars);
svp_player.execute();
//-->
</script>
<noscript>Your browser does not support JavaScript! JavaScript is needed to display this video player!</noscript>
<!--player code end-->

是否可以编写一个组件让我将这样的视频播放器嵌入到我的 React 应用程序中？

标签： javascriptreactjs

简单的方法是危险的SetInnerHTML （请仔细阅读）。其他方法会将其重构为反应组件。React 只是一种渲染某些东西并在之后触发一些副作用的方法。如果您想采用这种方法 - 请进一步阅读。

您要做的第一件事 - 将他们的播放器脚本添加到您的 html 一次（它位于第三行）。接下来，创建一个组件，该组件将为播放器呈现您的标记位置。您将vars作为道具传递给组件。为您的展示位置构建 id，props.clip_id以便您可以参考它来使其生效。创建将初始化播放器的效果。

这是一个工作示例。您将需要根据您的特殊需求对其进行调整。可能您想要执行清理或其他操作 - 为此，您可以将播放器实例存储在 ref 中，并在道具更改或执行清理时在其他效果中操作它。

javascript - 将任意脚本标签注入 React 应用程序

问题描述

解决方案

推荐阅读