DOM控制video实现开始/暂停按钮思路方法

前言

使用DOM控制视频元素,自定义播放控件,提供更多功能。
了解它,能让你在关于视频网站的项目中充分利用。

【开始/暂停】按钮实现思路

首先通过DOM获取video元素,然后通过paused()方法,判断视频是否处于暂停状态,最后if分支,如果处于暂停状态则使用play()方法开启播放状态,反之else让它暂停。
注意:paused()方法返回一个布尔值(Booleans),如果处于暂停状态返回true,反之flase。
放在if里判断,那就可以知道此方法返回值肯定是booleans值。


<html>
<head>
	<meta charset="UTF-8">
	<title>【开始/暂停】按钮title>
head>
<style>
	#Video{
		width:500px;
		height:500px;
		border-radius:30px;	
   }
style>
<body>
<video controls="controls" id="Video">
	<source src="Trailer.ogg">
	<source src="Trailer.webm">	
video>
<button onclick="btn()">开始/播放button>
<script>
	function btn(){
		var local=document.getElementById('Video');  //获取,函数执行完成后local内存释放
			if(local.paused){  //判断是否处于暂停状态
				local.play();  //开启播放
    	   }else{
				local.pause();  //停止播放
          }
       }
script>
body>
html>

DOM控制video实现开始/暂停按钮思路方法_第1张图片
这个按钮有着controls控件中三角按钮一样的功能。
定制自己的一套控件,也是很多专门视频领域的网站所做的。

你可能感兴趣的:(+,JScript)