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=& ...
随机推荐
- Android 打造自己的ImageLoader
Android 打造自己的ImageLoader 学习和参考 Android开发艺术探索 https://blog.csdn.net/column/details/15318.html 郭霖大神的Gl ...
- navicat 官方使用手册,中文版,快捷键大全
2017年1月23日09:52:51 这个官方中文文档很详细 https://www.navicat.com.cn/manual/online_manual/cn/navicat/win_manual ...
- php 使用curl获取Location:重定向后url
在php获取http头部信息上,php有个自带的函数get_headers(),我以前也是用这个的,听说效率在win上不咋地,再加上最近研究百度url无果,写了cURL获取重定向url的php代码来折 ...
- mogodb排序
db.getClloection('user').find().sort({'age':-1}).pretty() 2.自然排序,也就是插入的先后顺序 db.getClloection('user') ...
- C# Request 获取Url
1.获取页面,HttpContext.Current.Request也是Request //获取当前页面url string myurl = System.Web.HttpContext.Curren ...
- spring源码分析系列 (5) spring BeanFactoryPostProcessor拓展类PropertyPlaceholderConfigurer、PropertySourcesPlaceholderConfigurer解析
更多文章点击--spring源码分析系列 主要分析内容: 1.拓展类简述: 拓展类使用demo和自定义替换符号 2.继承图UML解析和源码分析 (源码基于spring 5.1.3.RELEASE分析) ...
- tcp nonblock connection rst
客户端(>5w)异步connect连接到server端,server端listen backlog设置为1024,发现存在部分客户端建立连接后,收到服务端的rst包. 先看下tcp监听套接字维护 ...
- CentOS 的 /etc/profile 和 ~/.bash_profile 及 .zshrc
交互式登陆shell 对于交互式的登陆shell而言,CentOS规定了startup文件的加载顺序如下: 登陆过程: 1. 读取并执行/etc/profile文件: 2. 读取并执行~/.bash_ ...
- 290.单词模式。给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式。(c++方法)
题目描述: 给定一种 pattern(模式) 和一个字符串 str ,判断 str 是否遵循相同的模式. 这里的遵循指完全匹配,例如, pattern 里的每个字母和字符串 str 中的每个非空单词之 ...
- SharedPreferences 原理 源码 进程间通信 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...