html5的video标签测试应用

最新推荐文章于 2023-02-08 10:13:54 发布

高如风

最新推荐文章于 2023-02-08 10:13:54 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/gp3056/article/details/70227253

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、video标签的使用

属性：src（要播放的音频文件路径）、autoplay（是否自动播放）、control（进度条）、loop（循环播放）、onended（是否播放完毕的是一个事件）

2、实现了一个简单的播放器

界面如下：

3、功能

主要通过onclick和onended事件来完成的，具体上面有的都实现了，不过音频文件的取名是有要求的，具体看代码

4、代码:

<!DOCTYPE HTML>
<html>
<head>
	<title>播放视频</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
	<p style="cursor:pointer;" οnclick="javascript:playvideo(1);">播放视频</p>
	<p style="cursor:pointer;" οnclick="javascript:playvideo(2);">关闭视频</p>
	<video id="video" style="width:1024px; height:600px; margin:0 auto; display:none;" src="./mybroadcast2.mkv" autoplay="autoplay" controls="controls" οnended="javascript:videoover();" οnclick="javascript:screen_stop();" οndblclick="javascript:double_click();">您的浏览器暂不支持播放该视频，请升级至最新版浏览器。</video>
	<button id="hary_run" style="width:100px; height:35px; cursor:pointer;" οnclick="javascript:controlTV('hary_run');">快进</button>
	<button id="stop_run" style="width:100px; height:35px; cursor:pointer;" οnclick="javascript:controlTV('stop_run');">暂停</button>
	<button id="current_run" style="width:100px; height:35px; cursor:pointer;" disabled=true οnclick="javascript:controlTV('current_run');">播放</button>
	<button id="open_voice" style="width:100px; height:35px; cursor:pointer;" οnclick="javascript:controlTV('open_voice');">静音</button>
	<button id="close_voice" style="width:100px; height:35px; cursor:pointer;" disabled=true οnclick="javascript:controlTV('close_voice');">取消静音</button>
</body>
<script>
	function playvideo(type){
		var openvideo = document.getElementById("video");
		if (type == 1){
			openvideo.style.display = "block";
		} else if (type == 2){
			openvideo.style.display = "none";
		}
	}
	
	// 让视频循环列表播放
	function videoover(){
		var videoId = document.getElementById("video");
		var video_path = videoId.src;	
		var path_begin = video_path.substring(0, video_path.lastIndexOf(".")-1);
		var path_end = video_path.substring(video_path.lastIndexOf("."));
		
		var num = parseInt(video_path.charAt(video_path.lastIndexOf(".")-1));
		if (num >= 3) {
			num = 0;
		} else {
			num++;
		}
		videoId.src = path_begin + num.toString() + path_end;
	}

	// 控制视频
	function controlTV(oprationId){
		var runId = document.getElementById(oprationId);
		var btn_value = runId.innerText;

		// 获取媒体播放Id
		var videoId = document.getElementById("video");
		if ("快进" == btn_value){
			// 获取当前播放进度
			var current_pro = videoId.currentTime;
			videoId.currentTime = current_pro + 10;
		} else if ("暂停" == btn_value) {
			videoId.pause();
			runId.disabled = true;
			var broad_btn = document.getElementById("current_run");
			broad_btn.disabled = false;
		} else if ("播放" == btn_value) {
			videoId.play();
			runId.disabled = true;
			var stop_btn = document.getElementById("stop_run");
			stop_btn.disabled = false;
		} else if ("静音" == btn_value) {
			videoId.muted = true;
			runId.disabled = true;
			btn_disabled = document.getElementById("close_voice");
			btn_disabled.disabled = false;
		} else if ("取消静音" == btn_value) {
			videoId.muted = false;
			runId.disabled = true;
			var btn_disabled = document.getElementById("open_voice");
			btn_disabled.disabled = false;
		}
	}

	function screen_stop(){
		// 获取媒体播放Id
		var videoId = document.getElementById("video");
		// 判断是否已暂停
		if (videoId.paused) {
			videoId.play();
		} else {
			videoId.pause();
		}
	}


	/*----------------------------------兼容性解决方案---------------------------------------------*/
	// 进入全屏
	function requestFullScrren(){
		var de = document.documentElement;
		if (de.requestFullscreen) {
			// W3C 提议
			de.requestFullscreen();
		} else if (de.mozRequestFullScreen) {
			// Firefox 10+
			de.moRequestFullScreen();
		} else if (de.webkitRequestFullScreen) {
			// Webkit (works in Safari5.1 and Chrome 15)
			de.webkitRequestFullScreen();
		}
	}

	// 退出全屏
	function exitFullScreen(){
		var de = document;	
		if (de.exitFullscreen) {
			// W3C 提议
			de.exitFullscreen();
		} else if (de.mozCancelFullScreen) {
			// Firefox 10+
			de.mozCancelFullScreen();
		} else if (de.webkitCancelFullScreen) {
			// Webkit (works in Safari5.1 and Chrome 15)
			de.webkitCancelFullScreen();
		}
	}

	// 双击全屏
	function double_click(){
		if (requestFullScrren) {
			requestFullScrren();
		} else {
			exitFullScreen();
		}
	}

	// 自动加载默认配置(未完成)
	/**function onload_property(){
		// 获取媒体播放Id
		var videoId = document.getElementById("video");
		var file = new ActiveXObject("Scripting.FileSystemObject");
		var inputStream = file.OpenTextFile("customvideo.properties");
		var content = "";
		while(!inputStream.atEndOfLine){
			content + inputStream.readLine + "\n";
		}
		inputStream.close();
	}
	window.onload = onload_property;**/
</script>
</html>

高如风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5的video标签测试应用

1、video标签的使用属性：src（要播放的音频文件路径）、autoplay（是否自动播放）、control（进度条）、loop（循环播放）、onended（是否播放完毕的是一个事件）2、实现了一个简单的播放器界面如下：3、功能主要通过onclick和onended事件来完成的，具体上面有的都实现了，不过音频文件的取名是有要求的，具体看代码4、代码: 播
复制链接

扫一扫