整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
：国外大型视频如下：
1、YouTube网址：http://www.youtube.com/ Youtube是全球著名的网站，里面有来自全球世界各地的朋友们上传的一些网络视频。已经成为了同类型网站里的翘首，也是世界上访问量最大的视频网站；
2、Break.com网址：http://www.break.com/ 是美国免费视频网站，提供视频播放、在线游戏、图片相册等内容；
3、好莱坞官方网站网址：http://www.hollywood.com/好莱坞（Hollywood.com）是美国著名的娱乐网站，提供在线电影，电影放映时间，电影预告，娱乐新闻，明星照片，票房，名人访谈，影评等；
4、ShowTime网址：http://www.showtime.jp/ ShowTime网站免费提供电影，海外电视剧，动画片，偶像，体育，音乐等视频。这个网站由于是免费网站，提供的视屏内容非常全面，在国外也是有非常高的人气的；
5、NicoVideo网址：http://www.nicovideo.jp NicoVideo是日本知名的视频分享网站，其在视频播放中加载弹幕评论特点使其在日本飞速发展。日本国内的动漫迷也经常利用动漫内容来制作MAD的视频上传到Nicovideo上；
6、IMDB网址：http://www.imdb.com 目前全球互联网中最大的一个电影资料库，里面包括了几乎所有的电影，以及1982年以后的电视剧集；
......
二：国内的如下：
1.蓝光电影网：http://gaoqing.la/（一部电影资源至少占用内存1G）；
2.电影天堂：https://www.dytt8.net/（可以迅雷免费下载）；
3.哔哩哔哩 (゜-゜)つロ 干杯~-bilibili ：https://www.bilibili.com/?spm_id_from=333.5.b_62696c692d6865616465722d6d.1（又称“B站”，国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主）；
4.中国网络电视台CNTV：http://tv.cctv.com/live/（可以看各个电视上电视台的直播）；
5.百度视频；（以下百度搜索一下即可找到，不需要再这里显示出来了）
6.土豆视频；
7.爱奇艺视频；
8.西瓜影音;
9.优酷视频；
10.腾讯视频；
11.新浪微博视频；
12.360视频网站；
13.芒果视频；
14.暴风影音；
15.影视大全；
......
三：几个自学的网站
1.我要自学网：https://www.51zxw.net/（免费学习各类技能）；
2.爱课程：http://www.icourses.cn/home/（比较高端，适合高材生等）；
3.网易公开课：https://open.163.com/；
4.一刻Talks:http://www.yiketalks.com/；
5.360doc个人图书馆：http://www.360doc.com/index.html（上面可以建立自己的书架）；
6.喜马拉雅：https://www.ximalaya.com/在线听书；
7.懒人听书：http://www.lrts.me/；
8.樊登读书：http://www.dushu.io/；
......
（此图片来源于网络）
多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频：
检测
Web站点上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频，您所有需要的是：
实例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
视频格式与浏览器的支持
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
MP4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例 1
为视频创建简单的播放/暂停以及调整尺寸控件：
播放/暂停 放大 缩小 普通
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
HTML5 Video 标签
| 标签 | 描述 |
|---|---|
| <video> | 定义一个视频 |
| <source> | 定义多种媒体资源,比如 <video> 和<audio> |
| <track> | 定义在媒体播放器文本轨迹 |
首先我们看看效果：
实现这样的功能需要学习以下几点内容。
1.认识<img/><map><area/></map>基本结构
首先复制一个html框架，命名为“图片区域链接.html”,示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>图片区域链接</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>向<body></body>中添加<img><map><area/></map>基本结构，示例代码如下：
<body>
<img/>
<map>
<area/>
</map>
</body> 指定要添加区域链接的图片的路径，如下：
<img src="img/image1.jpg"/>
<map>
<area/>
</map>让<img>标签通过<map>的名字来驱使<map>为自己工作。
需要两步，第一，给<map>起名字，name=“map”，为了兼容所有的浏览器，还要加上id=“map”（有的浏览器只认id）。
第二，让<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字时要加#。这个在之前的教程中也经常出现。
示例代码如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area/>
</map>下面来划分区域。
2.为图片划分区域的方法
<area>是用来划分区域的标签，area也是“”区域“”的意思。
默认的shape（形状）属性有“矩形（rect）”、“圆形（circ）”、“多边形（poly）”三个值。
分别添加三个形状，示例代码如下：
<img src="img/image1.jpg" usemap="#map"/>
<map name="map" id="map">
<area shape="rect"/>
<area shape="circ"/>
<area shape="poly"/>
</map>下面我们就要为区域规定参数，也就是在图像上的位置和范围大小。
为<area>添加coords属性可以指定区域的位置和范围。
如果shape="rect" 则coords由四个参数组成。例如coords="0,0,50,50"。从左到右，两两一组，组成两个平面坐标，即（0,0）和（50，50），单位是“像素”，矩形区域如下：
如果shape=“circ”，coords=“50,50,10”。（50,50）定义了圆心，10是半径。如图：
如果shape=“poly”，coords的参数不少于3对！注意是“对”！从左到右，两个数就是一组坐标，三组坐标可以确定一个三角形，多组坐标可以确定多边形。例如
这组参数画出了下图中歼20的边框线（600像素*400像素，如果图像的长宽像素数变了，参数就不正确了），如图：
这时，大家会有一个问题：如何才能知道图像中某个像素点的坐标呢？
3.使用Gimp软件精准定位图片区域
使用Gimp软件可以解决这个问题。
Gimp是一款类似于Photoshop的数字图像处理软件，不同的是，Gimp是开源免费的。
下载地址：https://www.gimp.org/
双击安装即可，注意选择一下安装目录。
完成安装之后打开，界面如下：
点击“文件”找到“打开”：
选择要打开的图片名字：
点击名称后，右边会有图像预览，点击“打开”即可：
打开后如图：
把鼠标放到图像的任意位置，看左下角：
这里就会显示我们鼠标所在的像素坐标数值。
这样我们就能方便地写“poly”的coords了。
请在空闲时找一张图片演练一下吧！
4.为区域添加链接
在<area/>标签中添加href属性即可指定链接路径，如下：
href="https://www.zhihu.com/question/284642168" 添加title属性可以在鼠标滑过链接区域时提示读者，如下：
title="歼20气动外形分析"今天的内容结束了，图像区域链接在使用时还有一些注意事项，我们下次再详细讨论。
使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
*请认真填写需求信息，我们会在24小时内与您取得联系。
