<!DOCTYPE html>

<html>

    <head>

        <title>指定视频的播放进度</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script type="text/javascript">

            //播放/暂停，采用同一个方法实现

            function playPause(){

                //获取视频DOM元素

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

                if (myVideo.paused)        //判断当前是否处于暂停状态

                  myVideo.play();        //调用play()方法开发播放

                else

                  myVideo.pause();        //调用pause()方法暂停视频播放

            }

            //从中间开始播放

            function playInMid(){

                //获取视频DOM元素

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

                //得到视频的总时长

                var duration = myVideo.duration;

                //得到当前的进度

                var currentTime = myVideo.currentTime;

                //判断是否暂停中

                if (!myVideo.paused)

                  myVideo.pause();

                //从总时长的一半的位置开始播放

                myVideo.currentTime = duration / 2;

                //继续播放视频

                myVideo.play();

            }

        </script>

    </head>

    <body style="text-align:center">

        <!-- HTML5新增的video标签，用于在网页里嵌入可以播放的视频 -->

        <video width="320" height="240" controls="controls" id="myVideo">

            <!-- 提供了两种格式的视频文件，以适应不同浏览器对video的支持 -->

            <source src="movie.mp4" type="video/mp4" />

            <source src="movie.ogg" type="video/ogg" />

            对不起，您的浏览器暂不支持video视频标签!

        </video>

        <br/>

        <input type="button" value="从头播放" onclick="playPause();"/>

        <input type="button" value="从中间播放" onclick="playInMid();"/>

    </body>

</html>

回到总目录

H5的新应用-指定视频的播放进度的更多相关文章

  1. 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

    最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...

  2. Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  3. H5 多个视频 循环播放效果

    跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" co ...

  4. HTML5 十大新特性(三)——视频和音频

    一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...

  5. Android开发笔记——视频录制播放常见问题

    本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...

  6. H5 的直播协议和视频监控方案

    H5 的直播协议和视频监控方案 一.流媒体主要实现方式 二.流媒体技术 2.1 流媒体 2.2 直播 2.3 流协议 2.3.1 HLS 协议 2.3.2 RTMP 协议 2.3.3 RTSP 协议 ...

  7. Android SurfaceView + MediaPlayer实现分段视频无缝播放

    Android当中实现视频播放的方式有两种,即:通过VideoView实现或者通过SurfaceView + MediaPlayer实现. 由浅至深,首先来看下想要在Android上播放一段视频,我们 ...

  8. 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步

    深入理解MVC   MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...

  9. WPF VlC 实现视频的播放（1）

    WPF 使用VLC实现视频的播放:网上开源代码我复制了一份:  https://github.com/someonehan/Vlc.DotNet 1. 准备阶段 (I)  libvlc.dll 和 l ...

随机推荐

  1. drupal7 boost模块为登录用户提供缓存

    这段时间研究Drupal7的缓存相关,看了好多资料,都提到了boost和authcache两个模块,今天来说一下boost. 具体的下载安装,配置等,官网写的听清楚,boost模块地址 ,安装配置方法 ...

  2. Math 对象 识记

    Math 对象用于执行数学任务. 1.使用 Math 的属性和方法的语法: var pi_value=Math.PI; var sqrt_value=Math.sqrt(15); 注释:Math 对象 ...

  3. HDU 1847 Good Luck in CET-4 Everybody! 博弈

    题目思路: 写出SG函数(1表示先手胜,0表示先手负) 110110110110-- 发现n%3==0时,Cici胜 #include<stdio.h> #include<strin ...

  4. jquery 学习笔记（1）

    $就是jquery的一个简写形式 如$('#foo')和jQuery('#foo')是等价的,  $.ajax和  jQuery.ajax是等价的   $符号是jQuery的一个简写形式 window ...

  5. ES 集群调整、升级 最佳实践

    日常应用中我们会经常对es 集群做一些参数调整或者升级版本,但是每次关闭节点再打开 其中的数据同步的痛苦估计有很多人领悟过(有可能出现IO或者网络拥堵导致恶性循环)官网有套方案可以尝试一下: 1.关掉 ...

  6. CentOS6.3添加nginx系统服务详细说明

    今天虚拟机上配了下服务器整理了个这个 nginx 服务 要注意 - 短横杠这个符号看看复制进去后有没有乱码,我之前就遇到这个问题,郁闷了好久才发现 提示:顶部的注释不要去除否则无法注册为系统服务, 关 ...

  7. MySQL命令出现字符错误提示原因

    ERROR 2019 (HY000): Can't initialize character set gb2312 搞了好半天,MySQL都重装了两次,号悲剧... 之前设置了系统编码全都是UTF-8 ...

  8. ios 实现在tableViewCell上面添加长按手势 删除该条cell以及列表后台数据等

    自己的代码  需要   把属性更改成自己要使用的 //创建长按手势 在cellForRowAtIndexPath代理方法中 UILongPressGestureRecognizer *longPres ...

  9. Linux常用使用技巧

    一.如何实时查看linux下的日志 cat /var/log/*.log 如果日志在更新,如何实时查看 tail -f /var/log/messages 还可以使用 watch -d -n 1 ca ...

  10. 第一百一十一节，JavaScript，BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...