HTML5视频|学习笔记

简介: 快速学习HTML5视频

开发者学堂课程【HTML5 新特性学习HTML5视频习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/396/detail/5047


HTML5视频


内容介绍:

一、视频

二、示例


一、视频

1、video (视频)

HTML5 提供了展示视频的标准

2、control (控制器)

control属性供添加播放、暂停和音量控件

3、标签:

<video>    定义声音

<source>   规定多媒体资源,可以是多个

4、属性:

width: 宽

height: 高


二、示例

创建一个新的文件 index,创建一个名为 raw 的资源文件夹,拷贝桌面上一个 3.mp4 视频

接下来创建一个 video 标签

<video src = “raw/3.mp4” controls = “controls” height = “300px” width = “300px”>浏览器不支持</video>

使用 Chrome 浏览器进行测试

这是一种添加资源的方式,还可以添加不同的资源

添加一个 <source> 标签

<video controls = “controls” height = “300px” width = “300px”>

<source src= “raw/3.mp4”>

</video>

此标签格式 IE 不支持,如果要查看浏览器是否支持,可以在官网 w3school.com.cn 上阅读

另外,如何进行转码和转码之后如何进行使用可以在官网  ffmpeg.org 上阅读



相关文章
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
170 0
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
|
2月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
13 0
|
8月前
|
前端开发 UED 容器
|
8月前
|
前端开发
[HTML]HTML学习笔记(四)
[HTML]HTML学习笔记(四)
|
8月前
|
移动开发 前端开发 JavaScript
|
7月前
|
前端开发 JavaScript 算法
网络结构与HTML学习笔记
网络结构与HTML学习笔记
149 0
网络结构与HTML学习笔记
|
7月前
HTML学习笔记(二)
HTML学习笔记(二)
27 0
|
7月前
HTML学习笔记(一)
HTML学习笔记
29 0