初探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 ...
随机推荐
- java封装对象转json字符串
/** * Copyright (c) 2011-2015, James Zhan 詹波 (jfinal@126.com). * * Licensed under the Apache License ...
- Chrome的Postman的使用
Chrome提供了一个很好的Web App 名为 Postman 使用这个web app,你可以输入一个url,然后可以很清楚的看到返回的各种结果 直接在Google中输入Postman, 找到它 ...
- POJ 3660 Cow Contest (Floyd)
题目链接:http://poj.org/problem?id=3660 题意是给你n头牛,给你m条关系,每条关系是a牛比b牛厉害,问可以确定多少头牛的排名. 要是a比b厉害,a到b上就建一条有向边.. ...
- FOR XML PATH的用法
USE [ChangHongWMS612]GO/****** Object: StoredProcedure [dbo].[st_WMS_SelStockInBillList] Script Date ...
- sqlite3 多线程和锁 ,优化插入速度及性能优化
一. 是否支持多线程? SQLite官网上的"Is SQLite threadsafe?"这个问答. 简单来说,从3.3.1版本开始,它就是线程安全的了.而iOS的SQLite ...
- heritrix
Heritrix3.0教程 http://blog.csdn.net/neo_liukun/article/category/1118819
- notepad++ 输入中文无响应
如果是win7,到用户文件夹 C:\Users\xxxxxxxx\AppData\Roaming\Notepad++ 里面的config.xml 删掉,然后重新打开,应该就可以了, 代价是会删除之前 ...
- Android BLE开发之Android手机搜索iBeacon基站
本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 上次讲了Android手机与BLE终端之间的通信,而最常见的BLE终端应该是苹果公司倡导的iBeacon基站. ...
- BOOL,int,float,指针变量与零值比较的if语句
1.注意这里说的是,与零值比较,而不是与零比较. 2.对于int类型,与零值比较就是: if(var == 0) //零值 3.对于bool类型,零值表示false,任何非零值表示true,因此使用: ...
- SQL Server 数据导入Mysql详细教程