无法在聚合物中获取视频元素

Question

我已经尝试了几个小时，甚至去谷歌第 2 页寻找答案，但我就是找不到有效的解决方案。我知道还有其他问题，相信我，我已经检查了所有问题，但没有一个有效。其中 10 个在脚本中被注释掉了。

What I'm trying to do is change the speed of a video, the options are 2.0, 1.0 and 0.5 speed. When either one of those is chosen the function in 'onclick' is started. But I need the video element to change the playbackrate. All help is appreciated :)

<dom-module id="my-video">
 <template>
    <style include="shared-styles">
        :host {
            display: block;

            padding: 10px;
        }

       /* Styles... */

    </style>

    <!-- If videoData.mime exists -->
    <template is="dom-if" if="{{!isEmpty(videoData.mime)}}">
       <video id="videoPlayer" onclick="Kuk(this)" poster="{{getThubnail(videoData.thumbnail)}}" controls>
           <source src="uploadedFiles/{{videoData.userid}}/{{videoData.id}}.mp4" type="{{videoData.mime}}">
           <track label="English subtitles" kind="subtitles" srclang="en" src="">
       </video>
       <div id="subtitles"></div>
     </template>

     <!-- If videoData.mime doesn't exists -->
     <template is="dom-if" if="{{isEmpty(videoData.mime)}}">
        <video id="videoPlayer" poster="{{getThubnail(videoData.thumbnail)}}" controls>
           <source src="videos/subtitle-video.mp4" type="video/mp4">
           <track label="English subtitles" kind="subtitles" srclang="en" src="/subtitles/subtitles0.vtt">
         </video>
     </template>

            <!-- SPEED CONTROLS source: http://cssdeck.com/labs/ufct35ys5t -->
            <div class="wrapper">
                <div class="toggle_radio">
                    <input type="radio" onclick="{{speed_dobble}}" class="toggle_option" id="first_toggle" name="toggle_option">
                    <input type="radio" onclick="{{speed_normal}}" checked class="toggle_option" id="second_toggle" name="toggle_option">
                    <input type="radio" onclick="{{speed_half}}" class="toggle_option" id="third_toggle" name="toggle_option">
                    <label for="first_toggle">
                        <p class="other-title tri_toggle">2.0</p>
                    </label>
                    <label for="second_toggle">
                        <p class="other-title tri_toggle">1.0</p>
                    </label>
                    <label for="third_toggle">
                        <p class="other-title tri_toggle">0.5</p>
                    </label>
                    <div class="toggle_option_slider">
                    </div>
                </div>
            </div>
</template>

和脚本：

<script>
    class MyVideo extends Polymer.Element {
        static get is() {
            return 'my-video';
        }

        static get properties() {
            return {
                URL: {
                    type: String,
                    value: '/api/video.php?id='
                }
                /* some values */

            };
        }

       /*Some code...*/

        speed_dobble() {
            console.log("Speed Dobble");

            // var player = this.elementShadow.querySelector('#videoPlayer');  // <-- 1  Cannot read property 'querySelector' of undefined
            // var player = this.shadowRoot.querySelector('video');            // <-- 2  Cannot read property 'querySelector' of null
            // var player = $('#videoPlayer');                                 // <-- 3  $ is not defined
            // var player = $(this.$.videoPlayer);                             // <-- 4  $ is not defined
            // var player = this.$$('#videoPlayer');                           // <-- 5  Not a function
            // var player = this.$.videoPlayer.querySelector('video');         // <-- 6  Undefined
            // var player = this.$.videoPlayer;                                // <-- 7  Undefined
            // var player = this.$$['#videoPlayer'];                           // <-- 8  Undefined
            // var player = Polymer.dom(this.root).querySelector("#video");    // <-- 9  null
            // var player = document.getElementById('videoPlayer');            // <-- 10 null

            console.log(player);
        }
    }

    window.customElements.define(MyVideo.is, MyVideo);
</script>

Answer 1

为每个输入字段设置值属性并在单击时调用单个函数可能会有所帮助，例如 'changeSpeed'。您可以将事件传递给函数以获取点击项的值并将该值设置为视频的速度属性。

我相信 this.$.videoPlayer 在这种情况下应该是正确的选择器。

此外，尝试使用 on-click="" 而不是 onclick=""。

我会尝试类似的方法：

<input type="radio" value="1.0" on-click="changeSpeed" class="toggle_option" id="first_toggle" name="toggle_option"> <input type="radio" value="0.5" on-click="changeSpeed" checked class="toggle_option" id="second_toggle" name="toggle_option"> <input type="radio" value="2.0" on-click="changeSpeed" class="toggle_option" id="third_toggle" name="toggle_option">

Answer 2

正如 Cuttsy27 所说，在 Polymer 中，您通常使用 on- 前缀 + 事件名称以声明方式附加事件，因此属性名称应为 on-click。此外，如他的示例所示（但未提及），您需要以字符串形式提供回调名称。例如，“speed_double”不是 数据绑定，因此不需要大括号。

所以，例如，这个：

<input type="radio" onclick="{{speed_dobble}}" class="toggle_option" id="first_toggle" name="toggle_option">

应该变成

<input type="radio" on-click="speed_dobble" class="toggle_option" id="first_toggle" name="toggle_option">

此外，我添加新答案而不仅仅是评论的另一个原因是 this.$.videoPlayer“快捷方式”通过 ID 获取元素可能不起作用实际上。这是因为在 this.$ 下，您将找到包含该元素后立即可用的元素。所以你不会找到有条件添加的元素，因为你的元素在 dom-if 中。所以你可能想尝试使用

之类的东西来查询

this.shadowRoot.getElementById('videoPlayer')

例如

Answer 3

我刚试过这个，对我来说效果很好（Polymer 2），其中 v 是我的 video 元素的 ID。

      this.$.v.pause();
      this.$.v.load();
      this.$.v.playbackRate = 2;

为了对此进行扩展，我会在您的元素中创建一个 videospeed 属性，观察者会根据我的示例调用一个函数来更改当前播放速度。

如果您仍然无法引用您的 videoPlayer，那么您可能有两个具有相同 ID 的项目（是的，我知道 DOM-IF 应该只创建其中之一，但只是一个猜测）。

无法在聚合物中获取视频元素

Cant get video element in polymer

html

javascript

video

polymer