【垃圾菜鸟笔记】html5 video标签的一点练习

来源：互联网发布：哪里可以买到淘宝店铺编辑：程序博客网时间：2024/05/20 12:49

基本上就是电影播放暂停什么的手动点击按钮下一部电影

html部分代码

<!DOCTYPE html><html><head><title>test video</title><script src="http://code.jquery.com/jquery-latest.js"></script></head><body><video src="movie.ogg" controls="controls"  id="video" preload='no' width="500px;">您的浏览器不支持 video 标签。<!-- autoplay  视频自动播放--></video><hr /><button onclick="bofang()" id="bofang">播放</button><button onclick="tingzhi()" >停止</button><input type="button" value="下一部" id="t_btn"><button onclick="kuaitui()">快进10秒</button><button onclick="shutup(this)">闭嘴</button><button onclick="soso()">加速播放</button><button onclick="yu()">减速播放</button><button onclick="normal()">正常音量</button><button onclick="upper()">提高嗓门</button><button onclick="lower()">降低嗓门</button><div><input type="hidden" placeholder="视频url." id="t_url"></div></body></html>

这个是javascript 部分的代码我本身就是当做练习做的所以没有将这部分封成js

<script type="text/javascript">var listVideo=['E:\\baofeng\\诅咒解说 S4信爷表示十个不够打 超清.mp4','E:\\baofeng\\诅咒解说 霸气螳螂 S4最强刺客打野 超清.mp4','E:\\baofeng\\诅咒解说 蜘蛛神carry 超逆风翻盘惊呆棒子 高清.mp4','E:\\baofeng\\留级之王3_(new).webm']; // 初始化播放列表var len=0;$(function(){$("#t_btn").click(function(){if(len<listVideo.length){$("#t_url").val(listVideo[len]);len+=1;}else {$("#t_url").val(listVideo[0]);len=1;}$("#video").attr("src",$("#t_url").val());//更新url//$("#video").attr("autoplay","true");//直接播放});});var len=0;var video=document.getElementById('video');var pd=0;//播放方法function bofang(){if(pd==0){video.play();pd=1;document.getElementById('bofang').innerHTML='暂停';}elseif(pd==1){video.pause();pd=0;document.getElementById('bofang').innerHTML='播放';}}//下一部$("#xiayibu").click(function(){alert();$("#video").attr("src",$("#t_url").val());//更新url$("#video").attr("autoplay","true");//直接播放len=len+1;});//快退10秒function kuaitui(){video.currentTime+=10;}function tingzhi(){video.currentTime=video.maxTime-1;video.pause();pd=0;document.getElementById('bofang').innerHTML='播放';}//静音按钮function shutup(obj){if(video.muted){obj.innerHTML="闭嘴";video.muted=false;}else{obj.innerHTML="张嘴";video.muted=true;}}//加速播放(3倍速度)function soso(){video.playbackRate=3;}//慢速播放(慢三倍)function yu(){video.playbackRate=1/3;}//正常倍速function normal(){video.playbackRate=1;//默认的播放倍速是1}//调高声音function upper(){video.volume+=0.2;//声音值的范围是0-1}//调低声音function lower(){video.volume-=0.2;}</script>

影片路径什么的没太细致的写就是写死的路径

0 0