如何访问 Angular2 中的 HTML 视频元素
Posted
技术标签:
【中文标题】如何访问 Angular2 中的 HTML 视频元素【英文标题】：How to get access to an HTML video element in Angular2 【发布时间】：2016-03-17 16:43:37 【问题描述】：我在 Angular2 组件中有一个 html5 <video> 元素。在允许用户将其分享到 Twitter 之前，我需要访问它以检查持续时间。
有没有什么方法可以通过模型绑定，或者直接访问 DOM，我可以在组件的支持类中获取这些信息？
我尝试使用 ng-model 绑定它，就像在组件的模板中这样：
<video controls [(ng-model)]="videoElement">
<source [src]="video" type="video/mp4" />
</video>
在组件的类（TypeScript）中：
videoElement: HTMLVideoElement;
这给了我这个错误：EXCEPTION: No value accessor for '' in [null]
我只需给视频元素一个 id 并使用 document.getElementById("videoElementId") 就可以访问它，但似乎必须有更好的方法。
【问题讨论】：
我可以使用 document.getElementById，但不允许使用类似 videoElement.play() 或 videoElement.pause() 的函数。如果我想播放/暂停视频，你知道该怎么做吗？ @J.Fun 我刚刚在控制台中尝试过，这两个功能都适用于我使用 document.getElementById("videoid").play(); ——你的意思是不允许？如果您遇到问题，我建议您提出一个新问题。 我的意思是，它提醒我一个错误：TS2339：在 phpStorm 中编译 typescript 时，类型 'HTMLElement' 上不存在属性 'play'。尽管它实际上可以在我的浏览器中使用。报错信息还是很烦，不知道怎么去掉。 我认为您需要将其转换为正确的类型（HTMLVideoElement）。像这样：你可以注入ElementRef，然后像这样访问元素
element.nativeElement.shadowRoot.querySelector('video').duration;
// with encapsulation: ViewEncapsulation.Native
可能还有其他视图封装模式
element.nativeElement.querySelector('video').duration;
（虽然我自己还没试过）。
这应该也可以
<video (durationchange)="durationChangeEventHandler($event)"></video>
然后使用$event.target访问它
使用指令（Dart 代码中的示例）
@Directive(selector: 'video')
class VideoModel
ElementRef _element;
VideoModel(this._element)
VideoElement video = _element.nativeElement as VideoElement;
video.onDurationChange.listen((e) => duration = video.duration);
num duration;
在你的组件中添加
@Component(
selector: 'my-component',
viewProviders: const [VideoModel],
directives: const [VideoModel],
templateUrl: 'my_component.html')
class MyComponent
@ViewChild(VideoModel)
VideoModel video;
现在您可以使用video.duration 访问持续时间
【讨论】：
两种方法都有效，谢谢！虽然进行了较小的编辑，但在您的示例中它将是 $event.target 【参考方案2】：<html ng-app="VideoLink">
<body ng-controller="linkvideo">
<video controls>
<source src=video type="video.mp4">
</video>
</body>
</html>
在控制器文件中
var videolink=angular.module('VideoLink',[]);
videolink.controller('linkvideo',function($scope)
$scope.video='name':'https://www.youtube.com/watch?v=R7GLYhJ51uo'
);
试试吧，可能对你有帮助
【讨论】：
感谢您的回答，我正在寻找 Angular2 解决方案以上是关于如何访问 Angular2 中的 HTML 视频元素的主要内容，如果未能解决你的问题，请参考以下文章