创建视频播放器（QuickTime的浏览器插件）反应的元素，输出丢失的视频性能

这是代码：创建视频播放器（QuickTime的浏览器插件）反应的元素，输出丢失的视频性能

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:[email protected]: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:[email protected]:10012" type="video/quicktime" autoplay="" target="myself" loop="" data-reactid=".0.0.1.1.0.0.0.0">

缺失的元素：自动播放值，qtsrc和值，缩放，控制器，插件页面和值，循环值;无法弄清原因。提前感谢您的帮助！

来源

2015-02-17 Yatko

http://facebook.github.io/react/docs/jsx-gotchas.html#custom -html-attributes – Dhiraj 2015-02-17 23:51:45

谢谢！我尝试了 - 但很显然我错过了一些东西 - 它只是不会发生......它甚至会停止渲染 – Yatko 2015-02-18 00:02:43

我做了这样的事情http://jsbin.com/viveci/2/ – Dhiraj 2015-02-18 00:06:59

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); 
    } 
    }

来源

2015-02-19 00:00:12 Yatko

你可以尝试这样的事情

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

来源

2015-02-18 02:10:00 Dhiraj

是的，我达到了相同的点，但视频属性仍然丢失。在添加宽度：500，高度：350，缩放：“tofit”之后，应调整视频大小以适应500x350窗口，但它完全被忽略。 – Yatko 2015-02-18 02:18:34

我出于想法，我会在这种情况下写一个自定义组件：D – Dhiraj 2015-02-18 04:22:49

谢谢@Dhiraj Bodicherla同样在这里。可能我今天会收到解决方案，并在工作时发布。 – Yatko 2015-02-18 15:42:52

创建视频播放器（QuickTime的浏览器插件）反应的元素，输出丢失的视频性能

回答

相关问题