H5的新应用-指定视频的播放进度
<!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的新应用-指定视频的播放进度的更多相关文章
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- H5 多个视频 循环播放效果
跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" co ...
- HTML5 十大新特性(三)——视频和音频
一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...
- Android开发笔记——视频录制播放常见问题
本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...
- H5 的直播协议和视频监控方案
H5 的直播协议和视频监控方案 一.流媒体主要实现方式 二.流媒体技术 2.1 流媒体 2.2 直播 2.3 流协议 2.3.1 HLS 协议 2.3.2 RTMP 协议 2.3.3 RTSP 协议 ...
- Android SurfaceView + MediaPlayer实现分段视频无缝播放
Android当中实现视频播放的方式有两种,即:通过VideoView实现或者通过SurfaceView + MediaPlayer实现. 由浅至深,首先来看下想要在Android上播放一段视频,我们 ...
- 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步
深入理解MVC MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...
- WPF VlC 实现视频的播放（1）
WPF 使用VLC实现视频的播放:网上开源代码我复制了一份: https://github.com/someonehan/Vlc.DotNet 1. 准备阶段 (I) libvlc.dll 和 l ...
随机推荐
- CreateProcess函数诡异的表现
场景:程序A使用CreateProcess函数去启动另一个程序(.exe)文件,在绝大部分情况下是可以成功启动的,但是在某些电脑上无效. 因为这“某些电脑”实在不好找,终于有一天借到一台这样的电脑. ...
- asp.net 后台验证成功（弹出对话框）并跳转？不能实现
原始 Context.Response.Write("<script></script>"); Response.Redirect(); 解决办法: Cli ...
- css三种布局方式
第一种布局方式:标准流(文档流) 标准流即为元素默认的显示方式.如块级元素独占一行,行内元素可以在一行显示. 第二种布局方式:浮动,float属性 浮动对应的css属性是float:left/righ ...
- SQLAlchemy入门
什么是SQLAlchemy? 是Python连接SQL数据库的一种方式,需要通过驱动来连接. 是Python中使用最广泛的ORM(对象关系映射)工具之一,即把数据库中的二维表结构映射成一个list对象 ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- 面向GC的Java编程（转）
转自:http://blog.hesey.net/2014/05/gc-oriented-java-programming.html Java程序员在编码过程中通常不需要考虑内存问题,JVM经过高度优 ...
- android 进程和线程管理
进程和线程的概念: 进程:程序的运行实例. 线程:cpu调度基本单位. Activity启动的时候,启动一个主线程,两个binder线程. 主线程实如何产生的?ZygoteInit启动,经由一系列调用 ...
- Facebook 添加点赞按钮
本来以为facebook文档里面会有那么一个简单的API,请求之后就可以对指定的页面点赞.但可能是出于防作弊方面的考虑,facebook只提供了自己官方的按钮 https://developers.f ...
- 《JS权威指南学习总结--6.8对象的三个属性》
内容要点: 每一个对象都有与之相关的原型(prototype).类(class)和可扩展性 一.原型属性 1.对象的原型属性是用来继承属性的,这个属性是如此重要,以至于我们经常把 "0的原型 ...
- Sass与Compress实战：第六章
概要:介绍Compass如何让你从本地开发原型轻松转移到正产环境的网址或Web应用中. 本章内容: ● CSS精灵的历史和基本原则 ● Compass混合器让精灵自动化 ● 自定义精灵图片和CSS输出 ...