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=& ...
随机推荐
- 未将对象引用设置到对象的实例 IIS
CMD C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i
- Linux 下 make 命令 及 make 笔记
Linux 下 make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.本文我们将用一些实例来讨论 make ...
- [BJOI2014]大融合
Description 给你一个n个点的森林,要求支持m个操作: 1.连接两个点 x,y 2.询问若断掉 x,y这条边,两点所在联通块乘积的大小 Hint: \(n,m<=10^5\) Solu ...
- 学JAVA二十一天,自定义数组
今天就说一下自定义数组,至于要怎么用,我也不知道,反正逼格挺高的. 闲话不多说,开始: 首先,自定义数组首先要创建一个类,用来做自定义数组的类型. public class User{ private ...
- failed to initialize unity graphics 错误解决方法(win7 unity4.x)
重装系统后 unity 4.7.2安装之后,破解完毕就有了个Fatal error; 提示信息为:failed to initialize unity graphics 解决办法:依旧是先查看了网上 ...
- Matplotlib新手上路(下)
接上篇继续,这次来演示下如何做动画,以及加载图片 一.动画图 import numpy as np import matplotlib.pyplot as plt import matplotlib. ...
- .Net性能的方方面面(必看官方经典)
更多性能提高相关文章,必看 https://msdn.microsoft.com/en-us/library/hh917314.aspx Chapter 1 - Fundamentals of Eng ...
- 关于Hook CreateMutex
我是个驱动新手,最近学习破解多开.经过一个通宵的百度和摸索,简单的多开kugou用以下代码可以了. MyNtCreateMutant( OUT PHANDLE MutantHandle, IN ACC ...
- 64位电脑上启动程序出现丢失MSVCR110.dll的解决办法
启动程序报错如下: 无法启动此程序,因为计算机中丢失MSVCR110.dll.尝试重新安装该程序以解决此问题. 应该很容易就搜索到,缺少这样的dll文件,是没有安装Visual C++ Redistr ...
- Swift 编程语言【转载+整理】
原文地址 在过去的几年中,移动应用程序风靡全世界并且已经改变了我们使用互联网进行工作或者休闲的方式.为了创建移动应用程序,各种技术应运而生,同时开发过程也开始将其作为一等公民来对待.尽管移动似乎已经无 ...