<!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. 客户端socket调用

    import java.net.Socket; import java.io.*; import java.util.Scanner; import java.util.regex.Pattern; ...

  2. 4.当接口的请求方式为 application/json的时候时

    1..当接口的请求方式为 application/json的时候时,使用抓包软件(fiddler)获取到这个接口, 其中的Inspectprs-TextView中的内容就是jmeter中Body Da ...

  3. caffe训练超参数

    错误: caffe % ./build/tools/caffe train -solver models/finetune_flickr_style/solver.prototxt -weights ...

  4. android 知识点

    版本更新 数据库Relam 图片加载库 视频bilibili 幻灯片 网络请求框架 内存检测工具 内存优化总结 压缩包下载并且解压 新闻资讯导航 联系人 滑动退出activity mvp框架 加载进度 ...

  5. C#入门经典中的SelectionFont属性为null

    14.6.2.richtextbox控件: private void buttonbold_click(object sender, eventargs e)        {            ...

  6. MySQL的保留字查询

    ADD ALL ALTER ANALYZE AND AS ASC AUTO_INCREMENT BDB BEFORE BERKELEYDB BETWEEN BIGINT BINARY BLOB BOT ...

  7. Python读取ini配置文件

    db_config.ini [baseconf] host=127.0.0.1 port=3306 user=root password=root db_name=evaluting_sys [con ...

  8. C++ 内存分析-valgrind

    valgrind包括了以下几个比较重要的模块:memcheck, cachegrind, callgrind, helgrind, drd, massif, dhat, sgcheck, bbv. 还 ...

  9. compute post expression

    #include<iostream> #include<stack> #include<string> using namespace std; //post ex ...

  10. top.location != self.location

    top.location != self.location 就是说当前窗体的url和父窗体的 url是不是相同 这个是为了防止别的网站嵌入你的网站的内容(比如用iframe嵌入的你的网站的页面)