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

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

本文关键字：输出 元素 属性 的视频 React 播放器 视频 Quicktime 插件 浏览器 创建      更新时间：2024-01-14

这是代码：

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 value，qtsrc和value，scale，controller，pluginspage和value，loop value；搞不清原因。感谢您的提前帮助

您可以尝试类似的

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

这是一个演示

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);
    }
  }
相关文章：