<!DOCTYPE html>

<html>

   <head>

          <title>HTML5-video(播放暂停视频；打开关闭声音；进度条)</title>

          <meta charset="utf-8"/>

   </head>

<body>

<video id="video1" controls="controls" width="400px" height="400px">

    <source src="videos/demo.mp4">

</video>

<div>

    <button onclick="enableMute()" type="button">关闭声音</button>

    <button onclick="disableMute()" type="button">打开声音</button>

    <button onclick="playVid()" type="button">播放视频</button>

    <button onclick="pauseVid()" type="button">暂停视频</button>

    <button onclick="showFull()" type="button">全屏</button><br />

    <span>进度条:</span>

    <progress value="0" max="0" id="pro"></progress>

    <span>音量:</span>

    <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>

</div>

<script>

    var btn=document.getElementsByTagName("button");

    var myvideo=document.getElementById("video1");

    var pro=document.getElementById("pro");

    var ran=document.getElementById("ran");

    //关闭声音

    function enableMute(){

        myvideo.muted=true;

        btn[0].disabled=true;

        btn[1].disabled=false;

    }

    //打开声音

    function disableMute(){

        myvideo.muted=false;

        btn[0].disabled=false;

        btn[1].disabled=true;

    }

    //播放视频

    function playVid(){

        myvideo.play();

        setInterval(pro1,1000);

    }

    //暂停视频

    function pauseVid(){

        myvideo.pause();

    }

    //全屏

    function showFull(){

        myvideo.webkitrequestFullscreen();

    }

    //进度条展示

    function pro1(){

        pro.max=myvideo.duration;

        pro.value=myvideo.currentTime;

    }

    //拖动range进行调音量大小

    function setvalue(){

        myvideo.volume=ran.value/100;

        myvideo.muted=false;

    }

</script>

</body>

</html>


效果图：

												


											
HTML5-video(播放暂停视频；打开关闭声音；进度条)的更多相关文章
	

    
								
  1. html5 video微信浏览器视频不能自动播放
		
    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
    
		
    2. 
						
  2. 31.JS实现控制HTML5背景音乐播放暂停
		
    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
    
		
    3. 
						
  3. html5 video使用autoplay属性时，声音混乱
		
    html5 video使用autoplay属性时,声音混乱 页面代码 Index.html <html xmlns="http://www.w3.org/1999/xhtml" ...
    
		
    4. 
						
  4. Android -- 真正的 高仿微信 打开网页的进度条效果
		
    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...
    
		
    5. 
						
  5. H5的video标签在网页上播放MP4视频时只有声音没有画面
		
    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4.  ...
    
		
    6. 
						
  6. HTML5 Video与Audio 视频与音频
		
    ---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...
    
		
    7. 
						
  7. Android中webview html5 自动播放本地视频
		
    MainActivity代码 public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override  ...
    
		
    8. 
						
  8. 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二
		
    今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...
    
		
    9. 
						
  9. HTML+JS实现视频上传显示进度条
		
    示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python3 install pip
			
    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/12033910.html curl https://bootstrap.pypa.io/get-pip. ...
    
			
    2. 
						
  2. 【开车旅行】题解(NOIP2012提高组)
			
    分析 首先我们可以发现,两个询问都可以通过一个子程序来求. 接着,如果每到一个城市再找下一个城市,显然是行不通的.所以首先先预处理从每一个城市开始,小A和小B要去的城市.预处理的方法很多,我用的是双向 ...
    
			
    3. 
						
  3. 【hackerrank】Type of Triangle
			
    题目如下: Write a query identifying the type of each record in the TRIANGLES table using its three side  ...
    
			
    4. 
						
  4. python-获取类名和方法名，动态创建类和方法及属性
			
    获取类名和方法名1.在函数外部获取函数名称,用.__name__获取2.在函数内部获取当前函数名称,用sys._getframe().f_code.co_name方法获取3.使用inspect模块动态 ...
    
			
    5. 
						
  5. slick轮播图使用大全
			
    let oSlick = { dom: null, isMobile: false, slickInited: false, barInterval:null, currentSlide:, last ...
    
			
    6. 
						
  6. android 常用框架总结（转载）
			
    原文:https://blog.csdn.net/weixin_44702125/article/details/89886948
    
			
    7. 
						
  7. ASCII 、UTF-8、Unicode编码
			
    1.各种编码的由来 1.1.计算机编码的由来 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.所以只能是用一些数字来表示文本,这就是编码的由来.最早的计算机在设计时采用8个比 ...
    
			
    8. 
						
  8. POJ 1363 Rails（栈）
			
    题目代号:POJ 1363 题目链接:http://poj.org/problem?id=1363 题目原题: Rails Time Limit: 1000MS   Memory Limit: 100 ...
    
			
    9. 
						
  9. Collections 索引
			
    About Me NOIp 数据结构专题总结 NOIp 图论算法专题总结 NOIp 基础数论知识点总结 NOIp 数学知识点总结 搜索算法总结 (不包含朴素 DFS, BFS) 位运算 字符串算法总结 ...
    
			
    10. 
						
  10. 使用IDEA 创建Maven项目，外加SSM框架
			
    使用idea 新创建项目 然后 新创建 java .resources 文件夹...... 图上是项目结构 java文件夹下的 文件夹 命名规范 com.nf147(组织名)+ oukele(作者)  ...
    
			
    11.