<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> </head> <body> <video id="video" width="500" controls="controls" preload="auto" autoplay style="background:#333" webkit-playsinline x-webkit-airplay> <source src='ceshi.mp4' type="video/mp4" -webkit-playsinline="true"></source>'; 您的浏览器不支持video标签 </video> <hr /> <input type="button" onclick="pose()" value="暂停" /> <input type="button" onclick="play()" value="播放" /> <input type="button" onclick="restart()" value="重置" /> <input type="button" onclick="counttime()" value="获取总时长" /> <input type="button" onclick="currtime()" value="当前时间" /> <input type="button" onclick="fword(10)" value="前进10秒" /> <input type="button" onclick="rewind(10)" value="后退10秒" /> <input type="button" onclick="selecttimeplay(50)" value="在50秒处播放" /> <input type="button" onclick="fast(0.1)" value="快放0.1" /> <input type="button" onclick="slow(0.1)" value="慢放0.1" /> <input type="button" onclick="volumeadd(0.1)" value="音量+0.1" /> <input type="button" onclick="volumeless(0.1)" value="音量-0.1" /> <input type="button" onclick="muted()" value="静音" /> <input type="button" onclick="removemuted()" value="取消静音" /> <script> //获取video元素 var video = document.getElementById("video"); //暂停方法 function pose(){ video.pause(); } //播放方法 function play(){ video.play(); } //将全部属性回复默认值，视频恢复重新开始状态 function restart(){ video.load(); } //获取视频总时长 function counttime(){ alert(parseInt(video.duration)+'s'); } function currtime(){ alert(parseInt(video.currentTime)+'s'); } //前进10s function fast(time){ video.currentTime += time; } //后退10s function fword(time){ video.currentTime += time; } //快退 function rewind(time){ video.currentTime -= time; } //在50秒处播放 function selecttimeplay(){ video.currentTime = 50; } //快放0.1 function fast(num){ video.playbackRate += num; } //慢放0.1 不能点十次，也就是慢放到1时会暂停 function slow(num){ video.playbackRate -= num; } //音量加10% function volumeadd(num){ video.volume += num; } //音量减10% function volumeless(){ video.volume -= num; } //静音 function muted(){ video.muted = true; } //取消静音 function removemuted(){ video.muted = false; } </script> </body> </html>
效果如下
视频收费处理，在做视频收费业务是，如果直接使用video api则会有js缓存的问题，解决该问题的办法是，用iframe嵌套视频代码把视频相关参数传递到该iframe里面，并且用js在iframe页面里面进行api的限定。