<!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. TheSeventhWeekJavaText

    如何用二维数组绘制五子棋盘 在定义一个棋盘类,声明一个二维字符数组,为每一个数组元素赋值为"+",打印输出就是一个简单地棋盘,如下图: 然后定义BufferedReader的实例对 ...

  2. Spring之ContextLoaderListener的作用

    Spring org.springframework.web.context.ContextLoaderListener public class ContextLoaderListener exte ...

  3. python操作---RabbitMQ

    RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息队列(MQ)是一种应用程序 ...

  4. Debian系Linux的dpkg命令

    dpkg "是"Debian Packager "的简写.为 "Debian" 专门开发的套件管理系统,方便软件的安装.更新及移除.所有源自" ...

  5. Tomcat下log4j设置文件路径和temp目录

    转自:http://www.cnblogs.com/dkblog/archive/2007/07/27/1980873.html 在Web应用中的如何设置日志文件的路径呢?最笨的方法是写绝对路径,但很 ...

  6. IDA Pro使用

    当我们的光标在某个函数处时,按回车键就可以跳到这个函数所在的位置:

  7. 第九十七节，使用JavaScript

    使用JavaScript 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一．创建一张HTML页面 因为JavaScript是嵌套在html ...

  8. magento数据添加

    1.第一种方法是一个字段一个字段地添加! $record = Mage::getModel('warehouse/record');      $record->addData($postDat ...

  9. redis连接池操作

    /** * @类描述 redis 工具 * @功能名 POJO * @author zxf * @date 2014年11月25日 */public final class RedisUtil { p ...

  10. Java Object 构造方法的执行顺序

    Java Object 构造方法的执行顺序 @author ixenos 为了使用类而做的准备工作包括三个步骤 1)加载:类加载器查找字节码(一般在classpath中找),从字节码创建一个Class ...