创建视频播放器（Quicktime 浏览器插件）React Elements，输出缺少的视频属性

Question

这是代码：

render: function () {
    switch (this.state.mime) {
      case "image":
        return React.createElement("img", React.__spread({}, this.props, { className: "img-responsive",
          src: this.state.url }));
      case "iframe":
        return React.createElement("iframe", React.__spread({}, this.props, { src: this.state.url }));
      case "rtmp":
        return React.createElement("embed", React.__spread({}, this.props, { src: this.state.streamUrl,
          type: "video/quicktime",
          autoPlay: true,
          qtsrc: this.state.streamUrl,
          target: "myself",
          scale: "tofit",
          controller: false,
          pluginspage: "http://www.apple.com/quicktime/download/",
          loop: "false" }));
      default:
        return React.createElement("span", null);
    }
  }

这是期望的输出：

<embed class="embed-responsive-item" src="rtsp://usr:pwd@10.0.1.12:10012" type="video/quicktime" autoplay="true" qtsrc="rtsp://10.0.1.12:10012" target="myself" scale="tofit" controller="false" pluginspage="http://www.apple.com/quicktime/download/" loop="false" data-reactid=".0.0.1.1.0.0.0.0">

这是我得到的：

<embed class="embed-responsive-item" src="rtsp://usr:pwd@10.0.1.12:10012" type="video/quicktime" autoplay="" target="myself" loop="" data-reactid=".0.0.1.1.0.0.0.0">

缺少元素：autoPlay 值、qtsrc 和值、scale、controller、pluginspage 和值、loop 值；想不通原因。提前感谢您的帮助！

Answer 1

你可以试试这样的

   var App = React.createClass({
   getInitialState: function(){
      return {'streamUrl' : 'http://google.com'};
   },
   render: function(){
      return React.createElement("embed", { src: this.state.streamUrl,
      type: "video/quicktime",
      autoPlay: true,
      "data-qtsrc": this.state.streamUrl,
      target: "myself",
      "scale": "tofit",
      "data-controller": false,
      "data-pluginspage": "http://www.apple.com/quicktime/download/",
      loop: "false" }, this.props);
   }
 });

这是一个DEMO

Answer 2

render: function () {
    switch (this.state.mime) {
      case "image":
        return React.createElement("img", React.__spread({}, this.props, { className: "img-responsive",
          src: this.state.url }));
      case "iframe":
        return React.createElement("iframe", React.__spread({}, this.props, { src: this.state.url }));
      case "rtmp":


        var _unsafeHtml = "<embed " + 
        "src=\"" + this.state.streamUrl + "\" " + 
        "type=\"video/quicktime\" " + 
        "width=\"512\" " + 
        "height=\"288\" " + 
        "autoPlay=\"true\" " + 
        "qtsrc=\"" + this.state.streamUrl + "\" " + 
        "target=\"myself\" " + 
        "scale=\"tofit\" " + 
        "controller=\"false\" " + 
        "pluginspage=\"http://www.apple.com/quicktime/download/\" " + 
        "loop=\"false\"/>";

        return React.createElement("div", { dangerouslySetInnerHTML: { __html: _unsafeHtml } });
      default:
        return React.createElement("span", null);
    }
  }

创建视频播放器（Quicktime 浏览器插件）React Elements，输出缺少的视频属性

Create Video Player (Quicktime browser plugin) React Elements, output missing video properties

javascript

node.js

object

dom

reactjs