HTML <video> 标签不播放通过插入点的源视频答案

【问题标题】：HTML <video> tag not playing source videos that pass through insertion pointHTML <video> 标签不播放通过插入点的源视频
【发布时间】：2014-12-02 18:06:53
【问题描述】：

以下是我的“视频播放器”元素的定义。您会在它的模板标签中注意到它希望源标签位于 light dom 中，如果是这种情况，它会将这些源标签包装在视频标签周围。

<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 中的视频标签中，并没有“技术上”作为孩子附加。我是否必须找到一种方法将源节点添加到元素的 SHADOW dom 中，而不是插入到 light Dom 中？如果有，怎么做？

【问题讨论】：

标签： javascript html polymer web-component

【解决方案1】：

我想我已经回答了我自己的问题。看来您必须将源元素引入影子根才能让视频标签真正识别它们。

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

这可能是因为内容标签仅引用特定位置的 RENDERING light dom 节点。内容标签不会从字面上将元素插入到你的 shadow dom 中。至少这是我的理解。

【讨论】：