HTML5视频video开发demo例子

简介: HTML5的video可以使用DOM的方式进行控制。video元素同样拥有方法、属性和事件。<br> 比如它拥有的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。<br> 其中的 DOM 事件能够通知您,比方说,video元素开始播放、已暂停,已停止,等等。<br> 废话少说了,看下面的实例吧。<br><p>为视频创建简单的播放/暂停以及调整尺寸控件:<
HTML5的video可以使用DOM的方式进行控制。video元素同样拥有方法、属性和事件。
比如它拥有的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。
其中的 DOM 事件能够通知您,比方说,video元素开始播放、已暂停,已停止,等等。
废话少说了,看下面的实例吧。

为视频创建简单的播放/暂停以及调整尺寸控件:

<!DOCTYPE html> 
<html> 
<body> 
欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!
<div style="text-align:center;">
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">大</button>
  <button onclick="makeNormal()">中</button>
  <button onclick="makeSmall()">小</button>
  <br /> 
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg" />
   你的浏览器不支持html5的video标签
  </video>
</div>
<script type="text/javascript">
	var myVideo=document.getElementById("video1");
	function playPause(){ 
		if (myVideo.paused) 
			myVideo.play(); 
		else 
			myVideo.pause(); 
	} 
	function makeBig(){ 
		myVideo.width=560; 
	} 
	function makeSmall(){ 
		myVideo.width=320; 
	} 
	function makeNormal(){ 
		myVideo.width=420; 
	} 
</script> 
</body> 
</html>
看看运行效果图:

欢迎大家关注我的博客!如有疑问,请加QQ群:135430763共同学习!

目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
4天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
4月前
|
开发工具 CDN 容器
基于Html+腾讯云播SDK开发的m3u8播放器
周末业余时间在家无事,学习了一下腾讯的云播放sdk,并制作了一个小demo(m3u8播放器),该在线工具是基于腾讯的云播sdk开发的,云播sdk非常牛,可以支持多种播放格式。
96 1
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
35 1
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0
|
4月前
|
JavaScript 前端开发
基于html+javascript开发的base64解码工具
base64在线解码工具可以帮助你将Base64编码的字符串解码为原始的文本或数据。
28 0
|
5月前
|
移动开发 资源调度 JavaScript
html2canvas 一个强大的使用js开发的浏览器网页截图工具
html2canvas 一个强大的使用js开发的浏览器网页截图工具
41 0
|
5月前
|
Web App开发 设计模式 JavaScript
基于html+jquery开发的科学计算器(课程作业)
基于html和jquery开发的科学计算器,该科学计算器可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器。 科学型带有所有普通的函数,所有的函数都分布在键盘上以致于你可以不用通过菜单列表来使用它们。
26 0