audio video 控制播放和停止
<audio id="audio" src="waring.wav" preload="auto" controls loop></audio>
$('#audio').play();
报错原因:play()方法属于DOM对象方法,$('#audio')为jquery对象
解决办法:将jquery对象转换为DOM对象
首先打印jquery对象$('#audio')
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);�0�2
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。�0�2
如:var audio =$('#audio') ; //jQuery对象�0�2
var au=audio�0�2[0]; //DOM对象�0�2
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象�0�2
如:var audio =$('#audio')�0�2;//jQuery对象�0�2
var au=audio.get(0); //DOM对象�0�2
==============================
-------------------------------------------------
=============================
Example solution based on your question:
var myAudio = $("#song")[0];
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="song" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3"></audio>
<img onclick="togglePlay()" src="https://pmcdeadline2.files.wordpress.com/2014/06/the-beatles-1__140613232022.jpg" width="100%">
audio video 控制播放和停止的更多相关文章
- audio 基本功能实现(audio停止播放,audio如何静音,audio音量控制等)
audio最简单原始的播放.暂停.停止.静音.音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此) <!doctype html> <html> &l ...
- js控制html5 audio的暂停、播放、停止
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- HTML5 - 使用JavaScript控制<audio>音频的播放
有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效. 1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...
- 自定义css样式结合js控制audio做音乐播放器
最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...
- apk支持html video控制 ,是播放状态就暂停,暂停状态就播放
apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
- 从Chrome源码看audio/video流媒体实现一(转)
现在绝大多数的网站已经从flash播放器转向了浏览器原生的audio/video播放器,浏览器是如何加载和解析多媒体资源的,这对于web开发者来说是一个黑盒,所以很有必要看一下浏览器是怎么实现的,Ch ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
随机推荐
- Git中的bash与CMD的区别
Windows在使用git工具时,可以看到有两个命令输入窗: 1. Git CMD 2. Git Bash 两者的区别:Bash是基于CMD的,Bash在CMD的基础上新增了一些命令和功能,故建议使用 ...
- Nodejs单元测试小结
前言 最近在写一课程的Project,用Node写了一个实时聊天小应用,其中就用到了单元测试.在写Node单元测试的时候,一方面感受到了单元测试的重要性,另一方面感受到了Node单元测试的不够成熟,尚 ...
- AGC027 A - Candy Distribution Again
目录 题目链接 题解 代码 题目链接 AGC027 A - Candy Distribution Again 题解 贪心即可 代码 #include<cstdio> #include< ...
- 230. 二叉搜索树中第K小的元素
230. 二叉搜索树中第K小的元素 题意 给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 你可以假设 k 总是有效的,1 ≤ k ≤ 二叉搜索树元素个数. ...
- Android Binder学习的网站
1. Binder系列 http://gityuan.com/2015/10/31/binder-prepare/ 2. Binder机制 http://jcodecraeer.com/a/anzhu ...
- Cocos Creator代码编辑环境配置
1,可以使用较为适合js的webstorm,亦可以采用VS: 2,若需要webstorm,在下载之后,在文件,设置内外部编辑器选用webstorm.exe,即可: 3,Visual Studio Co ...
- vscode调试C/C++时支持查看定义查看引用
貌似老版支持现在不支持了,需要自己加第三方工具,方法如下: 确保你安装了c/c++,此文写作时版本为0.20.1 从GTAGS官网下载Win32程序,解压,将其放在合适的位置,并把其目录下/bin文件 ...
- [Sqoop]将Hive数据表导出到Mysql
业务背景 mysql表YHD_CATEG_PRIOR的结构例如以下: -- Table "YHD_CATEG_PRIOR" DDL CREATE TABLE `YHD_CATEG_ ...
- springmvc 动态加载配置文件
<import resource="classpath:config/spring-profile-properties.xml" /> <context:pro ...
- Spring静态注入的三种方式
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/chen1403876161/article/details/53644024Spring静态注入的三 ...