无法获得聚合物中的视频元素

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

正如 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 2

为每个输入字段设置一个值属性并在单击时调用单个函数(如"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 3

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

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

为了扩展这一点，我将在您的元素中创建一个带有观察器的 videospeed 属性，该观察器根据我的示例调用函数来更改当前播放速度。

如果您仍然无法引用您的视频播放器，那么可能存在两个具有相同 id 的项目的问题(是的，我知道 DOM-IF 应该只创建其中一个，但只是一个猜测(。