现在的位置: 首页 > web前端 > 正文

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

2018年05月16日 web前端 ⁄ 共 2222字 ⁄ 字号 评论关闭

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

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='暂停';
			}else
			if(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>

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

抱歉!评论已关闭.