Angular笔记——媒体播放

2019-10-12 admin

视频播放

<video src="../../../assets/restart3.mp4" id="video3" *ngIf="playVideo3" class="video" autoplay controls></video>

音频播放

<audio src="../../../assets/time.mp3" id="musicTime"></audio>

其中,autoplay表示视频加载完成自动播放,controls显示播放按钮等工具栏,loop循环播放

ts

import { ElementRef } from '@angular/core'; //加载组件

public element: ElementRef;
constructor(element: ElementRef) {
    this.element = element; //绑定element
}

// 在方法中
this.element.nativeElement.querySelector('#bgmusic').play(); // 通过id的方式,选择哪一个媒体播放
this.element.nativeElement.querySelector('#bgmusic').pause(); // 停止

[转载]原文链接:https://segmentfault.com/a/1190000020659639

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77202.html

文章标题:Angular笔记——媒体播放

相关文章
angular+ionic 的app上拉加载更新数据实现方法
第一步,首先需要在&lt;ion-content&gt;标签里面加入标签&lt;ion-infinite-scroll ng-if=&quot;hasmore&quot; on-infinite=&quot;loadMore()&quot;...
2017-03-07
Angular ui.bootstrap.pagination分页
本文实例为大家分享了Angular 分页的具体代码,供大家参考,具体内容如下 1、Html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;v...
2017-02-27
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的...
2017-03-25
在JavaScript的AngularJS库中进行单元测试的方法
开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心。 ** 测试驱动开发流程图** AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试...
2017-03-24
javascript控制图片播放的实现代码
一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了,兼容ie、firefox和google浏览器。 分享代码如下: &lt;!DOCTYPE ...
2017-03-29
Clappr——开源的Web视频播放器
巴西著名的门户网站 Globo.com(视频播放器),使用的是基于OSMF的Flash组件。在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等。然而,由于缺乏针对视频平台进行维护的专门小组,...
2016-01-13
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出...
2017-03-24
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键...
2017-03-03
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的...
2017-03-24
回到顶部