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共同学习!

目录
相关文章
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为&#39;eager&#39;,并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
227 2
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
HTML5 Video(视频)1
HTML5引入了&lt;video&gt;元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。&lt;video&gt;元素可通过多个&lt;source&gt;子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
120 0
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
53 3
HTML5 Video(视频)作为背景的优化方案
使用 HTML5 `&lt;video&gt;` 标签作为网页背景视频可以提升视觉效果,但需优化以确保性能和用户体验。主要方法包括:选择合适的视频格式(MP4、WebM、Ogg)和分辨率(720p 或更低),压缩文件大小,确保视频静音和循环播放,使用 CSS 设置全屏样式,根据设备和网络条件加载视频或静态图像,使用 `playsinline` 属性和延迟加载技术提高性能,确保无障碍性,并监控页面加载时间。合理应用背景视频可增强网站视觉效果而不影响用户体验。
HTML5 <video>视频详解
HTML5引入了内置的`&lt;video&gt;`标签,简化了网页中视频的嵌入与播放。本文详细介绍了HTML5视频的基本语法、常用属性(如controls、autoplay等)、示例代码及使用注意事项,包括浏览器兼容性、跨域请求处理和响应式设计。通过JavaScript还可实现对视频播放的动态控制。掌握这些技巧,有助于提升网站的多媒体体验。
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
470 1
html5 video
本文介绍了HTML5中的`<video>`标签的用法,包括如何设置视频的属性如自动播放、循环播放、加载模式,以及如何通过JavaScript控制视频播放和暂停,还提到了支持的视频格式和`<video>`标签中`<source>`元素的作用。
57 0
html5 video
|
5月前
矢泽妮可二次元html视频动态引导页源码
矢泽妮可二次元html视频动态引导页源码 源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
40 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等