HTML5-video(播放暂停视频;打开关闭声音;进度条)

<!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>
效果图:

				
时间: 2024-10-14 15:41:41

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

视频控制的简易进度条

视频控制的简易进度条 样式: 作用:控制视频的播放点,实时显示视频播放位置 html: <div class="coll"> <span name="progress"> <b></b> <b></b> <b></b> </span> </div> css: .coll{position: absolute;bottom: 20px;left: 2

Android -- 真正的 高仿微信 打开网页的进度条效果

(本博客为原创,http://home.cnblogs.com/u/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截图 六,完整项目 一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一

HTML5 Video与Audio 视频与音频

---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" />

播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二

今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执行时却出现拖动条不能控制视频读取进度现象,结果发现是”一个大小写字母引发的血案“——在创建拖动条时命名为:Position,但是在设置拖动条的视频位置时却疏忽写为:position.为此笔者反复了N遍,由此可见程序的严格性,以及“搬砖码垛”时专注的重要性. 同样在附上程序之前我们有必要对程序中出现的

HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 jQuery版本:1.9.1 后台Servlet代码这里就省略了,使用的是 AJAX请求遭遇未登录和Session失效的解决方案 这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData  FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异

html5中的progress兼容ie,制作进度条样式

html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条! 一.progress使用方法 progress标签很好使用,他有两个属性,value和max,value表示当前进度而max表示总进度(一般可以用100) 1 <progress value="50" max="100"></progress> 二.progress如何兼容ie浏览器 用过progress标签的肯定知道,这个标签虽然好用但是不

HTML5多图片拖拽上传带进度条

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

android 用MyTV等第三方应用播放直播视频,只有声音没有画面

修改: Frameworks\av\media\libmediaplayerservice\nuplayer\nuplayer.cpp Void nuplayer::onMessageReceived(const sp<AMessage> &msg)  { ... case kWhatSetVideoNativeWindow: { ALOGD("kWhatSetVideoNativeWindow"); //add if(mAudioDecoder == NULL||

office2016word 每次打开都有进度条问题 解决方式

  最佳答案   每次打开Office 2016都提示配置进度(包括Word.PPT.Excel等等Office产品都有这种现象),如图,先是显示"安装程序正在准备必要的文件",接着显示"正在配置Microsoft Office Professional Plus 2016"的情况.如果重启完了再打开,还是提示配置进度,怎么解决处理这种问题呢?这里分享两种方法 修改注册表的方法解决Office启动配置问题1保证你的Office 2016已经激活 2打开注册表,在开始