HTML <video>标记不播放通过插入点传递的源视频

下面是我的'视频播放器'元素的定义。您会注意到它的模板标签中预计源标签处于明亮的状态，如果是这种情况，则会将这些源标签包裹在视频标签中。HTML <video>标记不播放通过插入点传递的源视频

<link rel="import" href="../../bower_components/polymer/polymer.html"> 

<link rel="import" href="../../bower_components/core-icons/core-icons.html"/> 
<link rel="import" href="../../bower_components/core-icon-button/core-icon-button.html"/> 
<link rel="import" href="../../bower_components/core-icons/av-icons.html"> 
<link rel="import" href="../../custom_components/content-pane/content-pane.html"> 


<polymer-element name="video-player"> 
<template> 

    <!--STYLES OMMITED--> 

<content-pane hint = "This is a video." label="Video"> 
<core-icon-button id="play" icon="av:play-arrow" on-click="{{toggle}}"></core-icon-button> 
<video> 

<content id = "content" select = "source"> 
</content> 

</video> 
</content-pane> 

</template> 

    <script> 
    Polymer('video-player', {  
     toggle: function(e) { 
     console.log("TOGGLE CALLED") 
      var video = this.shadowRoot.querySelector("video") 
      var play = this.shadowRoot.querySelector("#play") 
      play.style.display = "none"; 
      video.play() 
      video.style.opacity = "1"; 
      video.onended = function() { 
      video.load() 
      video.style.opacity = ".5" 
      play.style.display = "inline" 
      } 
     }, 
     domReady : function() { 

      console.log("DOM IS READY") 
      console.log(this.shadowRoot.querySelector("#content").getDistributedNodes()) 
     } 

}) 
    </script> 
</polymer-element>

然而，当我使用的元素，像这样（从不同的自定义元素的shadom DOM中）...

<video-player> 
<source src="../../assets/video/toy.mp4" type="video/mp4"/> 
<source src="../../assets/video/toy.ogv" type="video/ogv"/> 

</video-player>

没有影片出现。影片不会出现，如果我只是写：

<video> 
    <source src="../../assets/video/toy.mp4" type="video/mp4"/> 
    <source src="../../assets/video/toy.ogv" type="video/ogv"/> 
</video

但是，这没有乐趣，出于显而易见的原因（我想多余的东西在视频播放器元件发生）。

这是怎么发生的？我最好的猜测是，光明dom源节点分布到影子中的视频标签并不是“技术上”作为儿童的附件。我是否必须找到一种方法将源节点添加到元素的SHADOW dom中，而不是插入到光Dom中？如果是这样，怎么样？

来源

2014-12-02 Luke Gehorsam

我想我回答了我自己的问题。它似乎确实需要将源元素引入到影子根目录才能让视频标签实际识别它们。

So putting this code in the video-player constructor did the trick: 

attached : function() {  
      for (var i = 0; i <= this.children.length - 1; i++) { 
       var child = this.children[i]; 
       this.shadowRoot.querySelector("video").appendChild(child) 
} 
     }

也许这是因为内容标记只涉及渲染特定位置的光点节点。内容标签不会从字面上将元素插入到影子中。至少这是我的理解。

来源

2014-12-02 20:39:20

HTML <video>标记不播放通过插入点传递的源视频

回答

相关问题