初探html5---Video + DOM(视频播放)
1:HTML5 开发环境下 lang="en"
2:
<video width="320" height="240" controls="controls"> 其中 controls="controls" controls 属性供添加播放、暂停和音量控件。
<div style="text-align:center">
<button onclick="bigen()">播放/暂停</button>
<button onclick="big()">大</button>
<button onclick="centre()">中</button>
<button onclick="small()">小</button>
</br>
<video id="video1" width="420" style="margin-top;15px;" controls="controls">
<source src="mp4/mov_bbb.mp4" type="video/mp4"/>
<source scr="mp4/mov_bbb.mp4" type="video/ogg">
</video>
</div>
<script type="text/javascript">
var myone1=document.getElementById("video1");
function bigen()
{
if(myone1.paused)
myone1.play();
else
myone1.pause();
}
function big()
{
myone1.width=560;
}
function centre()
{
myone1.width=420;
}
function small()
{
myone1.width=320;
}
</script>
初探html5---Video + DOM(视频播放)的更多相关文章
- 移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...
- 移动端HTML5<video>视频播放优化实践[转]
http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...
- Chrome/Chromium HTML5 video 视频播放硬件加速
Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...
- HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...
- 移动端 HTML5 <video> 视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- [转]移动端HTML5<video>视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- 【HTML5】Video + DOM
效果图: <!DOCTYPE html> <html> <body> <div style="text-align:center;"> ...
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
随机推荐
- [C语言 - 1] C语言数据类型
基本数据类型: byte short int unsigned int long long long unsigned long float double char char * The size ( ...
- Activator.CreateInstance 方法 (Type) 的用法
转自:http://www.cnblogs.com/lmfeng/archive/2012/01/30/2331666.html Activator.CreateInstance 方法 (Type) ...
- Cocos2d-x——Cocos2d-x 屏幕适配新解【转载】
Cocos2d-x 屏幕适配新解 本文出自[无间落叶](转载请保留出处):http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各 ...
- MEF 编程指南(十):重组
有些应用程序被设计成在运行时动态地改变.例如,一个新的扩展可能被下载,或者其他原因变得不可用.MEF 依靠我们称之为重组(Composition)的技术处理,在初始化组合以后改变导入值的场景. 导 ...
- cocos2d-x CCScrollView
转自:http://www.cnblogs.com/dcxing/archive/2012/12/31/2840217.html ScrollView一般用在游戏的关卡选择这种类似的场景还有帮助这种场 ...
- UVa297 Quadtrees
// UVa297 Quadtrees // 题意:给两棵四分树的先序遍历,求二者合并之后(黑色部分合并)黑色像素的个数.p表示中间结点,f表示黑色(full),e表示白色(empty) // 算法: ...
- Swift学习笔记三
协议和扩展 在Objective-C中,协议是很常见也非常重要的一个特性,Swift中也保留了协议,语法略有变化. 用protocol关键字声明一个协议: protocol ExampleProtoc ...
- angularjs入门学习【应用剖析中篇】
在上一节讲完了关于应用开发中如数据绑定,加入样式一类的基础操作后,接下来,将在应用中,与控制其有关的一些事件... 一.UI和控制器的分离 我们须要明白控制器在应用中的三个作用: [1]在应用模型中设 ...
- [Angular-Scaled Web] 8. Using $http to load JSON data
Using the $http service to make requests to remote servers. categories-model.js: angular.module('egg ...
- Android SDK安装时碰到的问题之解决办法
问题:hostname in certificate didn't match: <dl-ssl.google.com> != <www.google.com> Fetchin ...