video,source元素
一,视频
<video src="../[再一次快乐结局]第15集.mp4" controls="controls" width="500" height="300" poster="../1.jpg" loop="loop" autoplay="autoplay" preload="auto"> 您的浏览器暂不支持! </video>
注意:此标签不在input标签内
control:显示视频的播放,音量,暂停等工具栏
width,height:视频的长宽
poster:播放前的预览图
loop:当图片结束时,重新播放
autoplay:加载结束自动播放
preload: 1.auto:自动加载视频的播放时间,播放内容
2.none:默认值
3.metadata:自动加载视频的时间,但不加载播放的内容
<video width="500" controls="controls" > 您的浏览器暂不支持!
<source src="../[再一次快乐结局]第15集.mp4" type="video/mp4" />
<source src="../[再一次快乐结局]第15集.webm" type="video/webs" />
<source src="../[再一次快乐结局]第15集.ogg" type="video/ogg" />
</video>
您的浏览器暂不支持此格式!
</video>
source:解决浏览器的兼容性问题,但此时video标签内不能使用src
以上三种视频格式,浏览器会根据格式选择播放,哪种格式合适就哪种,若格式都不满足,将会显示source标签中的内容;
二,音频
<audio controls="controls" > 您的浏览器暂不支持!
<source src="../爱你.mp3" type="audio/mp4" />
<source src="../爱你.webm" type="audio/webs" />
<source src="../爱你.ogg" type="audio/ogg" />
</audio>
与video相比,减少的属性:width poster
video,source元素的更多相关文章
- html5--4-3 source元素-解决浏览器的兼容
html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...
- html5的source元素
html5的source元素 一.总结 一句话总结: 主要是解决视频播放时候的浏览器的兼容问题 二.html5的source元素 学习要点 掌握source元素的用法 source元素-解决浏览器额兼 ...
- HTML5之多媒体
概览 html5新增了两个关于多媒体的元素:video和audio,前者是用于视频,后者用于音频.而他们使用非常简单 <audio src="xhn.mp3" control ...
- 02_HTML5+CSS详解第三天
WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...
- audio和video元素
目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...
- javascript 创建video元素
<!DOCTYPE html> <html> <body> <h3>演示如何创建 VIDEO 元素</h3> <p>请点击按钮来 ...
- video元素和audio元素
内容: 1.video元素 2.audio元素 注:这两个元素均是HTML5新增的元素 1.video元素 (1)用途 <video> 标签定义视频,比如电影片段或其他视频流 (2)标签属 ...
- html5的video元素学习手札
为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...
- 《HTML5》 Audio/Video全解
一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...
随机推荐
- asp.net将本地Excel上传到服务器并把数据导入到数据库
前台代码: <td class="formLabel"> 批量修改: </td> <td class="formInput"> ...
- HDU 2102 A计划(三维BFS)
这题太欢乐了......虽然wa了几次,但是想到骑士在两幅图的传送门中传来传去就觉得这骑士太坑了 #include <cstdio> #include <iostream> # ...
- cf754D
题意:给你一个数m,有多少优惠券,给个n,主角想用多少优惠券.然后接下来时m行,每行两个数,那张优惠券的优惠区间a,b(在a号货物到b号货物之间的所有都可以优惠) 问你,能不能用k张优惠券,是他的优惠 ...
- 浙大PTA - - File Transfer
题目链接:https://pta.patest.cn/pta/test/1342/exam/4/question/21732 #include "iostream" #includ ...
- Collections.sort的两种用法 转
/** * @author guwh * @version 创建时间:2011-11-3 上午10:49:36 * 类说明 */ package com.jabberchina.test; impor ...
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- Linux编辑器的选择使用
在执行 crontab -e的时候 发现编辑器不对 用的是nano 立刻 sudo select-editor 然后终端返回 Select an editor. To change later, ru ...
- (转)关闭WordPress自动加载的Open Sans字体,总是连接googleapi.com,导致打开wordpress很慢
转自http://www.xuanfengge.com/turn-off-automatic-loading-wordpress-open-sans-fonts.html 一.'在网上搜了一番,有四种 ...
- Yet Another 10 Common Mistakes Java Developers Make When Writing SQL (You Won’t BELIEVE the Last One)--reference
(Sorry for that click-bait heading. Couldn’t resist ;-) ) We’re on a mission. To teach you SQL. But ...
- android开发之Toast的多种应用
Toast最基本的功能就是弹出一个弱提示,这个很简单我就不说了,说说Toast一些其他的作用. 来公司的时候,公司产品的1.0版本已经发布出去了,但是1.0是一个必须联网才能使用的产品,在2.0中想让 ...