Html5+CSS3之音视频播放
一、视频播放控制
1.Html5支持的视频格式有.webm,.ogg,在Html5中播放视频所用的标签为<video controls="controls" src="dahuaxiyou.webm"></video>，其中src是引用视频文件的地址属性，controls是播放控制，如果不设置改属性，将无法控制视频的播放，例如：
<!doctype html>
<html>
<head><title>Video</title></head> <body>
<section>
<video src="大笨熊.webm" controls></video>
</section>
</body>
</html>
2. 当然如果当前的浏览器如果不支持html5，那我们是不是应该给用户一个友好的提示呢，答案是必须的，例如
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<video controls="controls" src="VID.webm" width="100" autoplay="autoplay" loop="loop">
您的浏览器不支持播放
</video> </body>
</html>
3. 如果要播放多种格式的视频，而我们有无法判断用户所使用的是哪个浏览器，那又该怎么办呢，这种情况下Html5还能保证视频的正常播放吗，针对这类问题，html5提出了多资源的播放功能，也就是<source><source>标签，我们可以在<video>标签中放置多个资源文件以引入不同的视频格式,例如：
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>多资源视频播放</p>
<video controls="controls" >
<source src="VID_20131103_215333.3gp" type="video/3pg" ></source>
<source src="VID.webm" type="video/webm"></source>
......
您的浏览器不支持!
</video>
</body>
</html>
浏览器会首先选择播放第一source文件，如果失败，会选择播放第二个source文件，直到找到能能够播放的视频，source标签中的type属性是指定视频的格式，同样src是引用视频文件的路径
4.视频播放属性
- 自动播放:AutoPlay="AutoPlay";
- 循环播放:Loop="Loop";
- 宽度:width;
二、音频文件播放控制
1.Html5中支持的音频格式有.mp3,声明音频播放的标签为<audeo>
Html5+CSS3之音视频播放的更多相关文章
- 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...
- HTML5+CSS3整体回顾
http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...
- 7款效果惊人的HTML5/CSS3应用
今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...
- html5+css3杂记
H5C3个人笔记 before&after 1. 必须有content display 2. 场景:不想改变html结构:解决浮动 解决浮动: 2c d h v transition 过渡 1 ...
- 【Web前端HTML5&CSS3】03-字符实体与语义标签
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...
- Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
- 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
随机推荐
- [置顶]Python开发之路
阅读目录 第一篇:python入门 第二篇:数据类型.字符编码.文件处理 第三篇:函数 第四篇:模块与包 第五篇:常用模块 第六篇:面向对象 第七篇:面向对象高级 第八篇:异常处理 第九篇:网络编 ...
- idea如何快速查看接口的实现类
查找接口的实现类: IDEA 风格 ctrl + alt +B 在按F2查看详细文档注解 查看类或接口的继承关系: ctrl + h
- Django 2.0 官方文档翻译
from django.contrib import admin from django.urls import include, path urlpatterns = [ path('polls/' ...
- 干掉windows无脑设定：“始终使用选择的程序打开这种文件”、“使用Web服务查找正确的程序”
先看几张图体会一下: 实在很佩服自己就那样默默忍受了很多很多年.其实这些东西在网上小小的一搜,5分钟就能搞定. 然而我们大家都在想,现在没时间,我还要做xxxx事呢,反正多点两下鼠标而已. 是啊,点两 ...
- gitlab 权限说明
五.权限说明 Guest(匿名用户) - 创建项目.写留言薄 Reporter(报告人)- 创建项目.写留言薄.拉项目.下载项目.创建代码片 段 Developer(开发者)- 创建项目.写留言薄.拉 ...
- [SDOI2009]HH的项链-树状数组/线段树
树状数组: #include<bits/stdc++.h> using namespace std; ; int id[maxn],tree[maxn],vis[maxn],num[max ...
- 20175226 2018-2019-2《java程序设计》结对编程-四则运算（第二周-阶段总结）
需求分析(描述自己对需求的理解,以及后续扩展的可能性) 实现一个命令行程序,要求: 自动生成小学四则运算题目(加,减,乘,除) 支持整数 支持多运算符(比如生成包含100个运算符的题目) 支持真分数 ...
- 8266编译错误 xtensa-lx106-elf/bin/ld: segmentled section `.text' will not fit in region `iram1_0_seg'
一种简单的解决办法 Okay, the solution was to copy the libgcc.a file from: esp-open-sdk/ESP8266_NONOS/lib/ to ...
- 5G到来，App的未来，是JavaScript，Flutter还是Native ？
Native App React Native(RN)发布于2015年,也是使用JavaScript语言进行跨平台APP的开发.与H5开发不同的是,它使用JS桥接技术在运行时编译成各个平台的Nativ ...
- java - day007 - 继承(2), 多态,面向对象,抽象类
继承 新建子类对象是,先新建父类对象,并执行父类的构造方法, 默认执行父类的无参构造放方法 可以 手动调用父类的有参构造 super(参数 ) super super.xxx() 调用父类成员 一般重 ...