<!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. 4. printf 命令

    1. printf 命令的语法 printf format-string [arguments...] 参数说明: format-string: 为格式控制字符串 arguments: 为参数列表. ...

  2. 中小型公司数据仓库搭建——以mysql为例

    为了方便公司的数据分析平台的独立运行和数据挖掘的探索,今年上半年在公司搭建了支持数据平台和数据挖掘的数据仓库:现就数据仓库的创建工作总结如下,供大家参考: 首先介绍下数据仓库搭建的缘由: 公司创建两年 ...

  3. jquery常用的选择器

    jquery用选择器来得到jquery对象,进而进行一些操作. 一.基本选择器 1.id选择器.示例:选择id为one的元素 var $one = $("#one"); 2.类选择 ...

  4. zTree 勾选checkbox

    zTree 勾选checkbox var setting = {    check: {        enable: true//        chkboxType : { "Y&quo ...

  5. Linq入门

    一.Linq需要的C#语法支持: 1.隐式变量的使用var var使用时必须初始化      var是强类型数据 2.自动属性:public string FirstName{get ;set;} 3 ...

  6. Apache .htaccess语法之RewriteRule

    [说明]定义重写的规则[语法]RewriteRule Pattern rewritePattern [flags] # 开启 rewrite 功能 Options +FollowSymlinks Re ...

  7. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

  8. phantomjs处理alert、confirm弹窗

    一:phantomjs处理alert弹窗 脚本实现功能为:点击click me按钮弹出弹窗消息为cheese,点击确定按钮,弹窗关闭 脚本代码为:注意的是phantomjs处理alert弹窗需要将ph ...

  9. 第六十七节，html表单元素

    html表单元素 学习要点: 1.表单元素总汇 2.表单元素解析 本章主要探讨HTML5中表单元素,表单元素用于获取用户的输入数据.   一．表单元素总汇 HTML5的表单中,提供了各种可供用户输入的 ...

  10. HTML5 中的新特性：

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...