<!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. 【leetcode】390. Elimination Game
			
    题目如下: 解题思路:对于这种数字类型的题目,数字一般都会有内在的规律.不管怎么操作了多少次,本题的数组一直是一个等差数列.从[1 2 3 4 5 6 7 8 9] -> [2 4 6 8] - ...
    
			
    2. 
						
  2. LINUX boot 内存不够
			
    查看当前使用内核版本号.输入 uname -a 查看. 删除旧内核.输入命令: sudo apt-get remove linux-image- 接着按两下tab键,将显示所有的内核版本:把目前使用的 ...
    
			
    3. 
						
  3. 【翻译】详解HTML5 自定义 Data 属性
			
    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
    
			
    4. 
						
  4. getAttribute和getParameter
			
    getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParame ...
    
			
    5. 
						
  5. [CSP-S模拟测试]:毛二琛（DP）
			
    题目描述 $MYC$在$NOI2018$中,遇到了$day1T2$这样一个题,题目是让你求有多少“好”的排列.$MYC$此题没有获得高分,感到非常惭愧,于是回去专心研究排列了.如今数排列的题对$MYC ...
    
			
    6. 
						
  6. 个推安卓推送SDK集成步骤详解
			
    以下是一位开发者在集成个推安卓推送SDK时候的亲身经历: 作者:吃饱了想睡. 概述 公司准备采用个推作为第三方推送平台,我作为客户端的头号小鸟,掐指一算已经毕业 0.1 年了,Leader 准备把这个 ...
    
			
    7. 
						
  7. Php.ini 中文注释详细
			
    Php.ini 中文注释 这个文件控制了PHP许多方面的观点.为了让PHP读取这个文件,它必须被命名为   ; ´php.ini´.PHP 将在这些地方依次查找该文件:当前工作目录:环境变量PHPRC ...
    
			
    8. 
						
  8. 移动端调试 — iPhone +Safari
			
    1   开启iOS设备的调试功能 打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”: 2   mac safari浏览器设置开发者工具 safari ->偏好设置 ...
    
			
    9. 
						
  9. 架构-数据库访问-SQL语言进行连接数据库服务器-DAO：DAO
			
    ylbtech-架构-数据库访问-SQL语言进行连接数据库服务器-DAO:DAO DAO(Data Access Object) 数据访问对象是一个面向对象的数据库接口,它显露了 Microsoft  ...
    
			
    10. 
						
  10. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第1节 Scanner类_4-练习一_键盘输入两个数
			
    导包语句其实不用我们自己去写, 选中后回车会自动的导入包 java.util 如果没有导入进来也可以,光标在关键字那里,ALT+回车 也会自动导入包 运行看一下结果:程序其实还有可以优化的地方 先输入 ...
    
			
    11.