Question

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

我要做的是改变视频的速度，选项是2.0,1.0和0.5速度。当选择其中任何一个时，启动'onclick'中的功能。但我需要视频元素来改变播放速度。所有帮助表示赞赏:)

<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”）。您可以将事件传递给函数以获取被点击项目的值，并将该值设置为视频的速度属性。

这个。$。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">

此外，我添加新答案而不仅仅是评论的另一个原因是，按ID获取元素的this.$.videoPlayer“快捷方式”实际上可能无效。这是因为在this.$下，您会在包含元素后立即找到可用的元素。因此，您将找不到有条件添加的元素，因为您的元素位于dom-if中。因此，您可能希望尝试使用类似

的查询

this.shadowRoot.getElementById('videoPlayer')

例如

Answer 3

我刚试过这个，它对我来说很好（聚合物2），其中v是我的video元素的id。

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

为了扩展它，我会在你的元素中创建一个videospeed属性，观察者根据我的例子调用一个函数来改变当前的播放速度。

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

无法在聚合物

3 个答案: