音频、视频播放时属性、事件等操作

音频、视频 具有的属性

"error", "src", "currentSrc", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "initialTime", "duration", "startOffsetTime", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable",
"ended", "autoplay", "loop", "controls", "volume", "muted"

可以用js控制和获取video的值

$myVideo.currentTime;   //视频播放时间

$myVideo.duration       //视频总时间长

$myVideo.buffered.end(0)//已加载的时长

根据播放时间操作

<video id="video" src="v1.mp4" preload="auto" poster="tencent/page1.jpg" x-webkit-airplay="true" webkit-playsinline="true"></video>

var $myVideo = $("#video")[0];

$myVideo.play();

//根据视频播放时间控制元素(此用法  不是  所有浏览器支持)

$myVideo.ontimeupdate = function(){
if($myVideo.currentTime > 0){
}
if($myVideo.currentTime == $myVideo1.duration){
}

};

//根据视频播放时间控制元素(此用法  多  浏览器支持)

$myVideo.addEventListener("timeupdate", function(){
if($myVideo.currentTime > 0){
}
if($myVideo.currentTime == $myVideo1.duration){
}

}, false);

------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------

音频 播放暂停最简单的方法

1、控制播放

<audio id="chatAudio" src="shake.mp3">
<!--<source src="shake.mp3" type="audio/mpeg">-->

</audio>

var $myVideo = $("#chatAudio")[0];

//音频播放

$("body").click(function(){
$myVideo.play();

});

2、H5点击播放暂停

<div class="audio audio_rotate"></div>

<audio id="chatAudio" src="qiangu.mp3" autoplay loop>
<!--<source src="qiangu.mp3" type="audio/mpeg">-->

</audio>

var $myVideo = $("#chatAudio")[0];

var isplay = true;

//音频播放/暂停

$(".audio").click(function(){
if(isplay){
$myVideo.src = "";
$(this).removeClass("audio_rotate");
isplay = false;
}else{
$myVideo.src = "images/qiangu.mp3";
$(this).addClass("audio_rotate");
isplay = true;
}

});