整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
频是网页承载内容很重要的一个元素，也是必不可少的网页表现形式（图、文、表、视、音）之一。曾经网页要想播放视频、制作游戏，必须得用第三方插件flash。不仅编写代码要使用额外的语言，浏览器也必须得装第三方插件，非常不方便。随着html5标准逐渐普及，移动端、pc端开始抛弃flash，如今几乎所有的浏览器都使用html5来制作视频。
目标
flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争，它捡了个大便宜，乘机定义网页媒体标准。
W3C与WHATWG的第五代web标准之争
flash填补了当时网页只有文字和图片的单调世界，将媒体（视频、音频、游戏）引入了网页，将网页带进多彩的世界。
Flash能够用仅仅十几K到几百K的体积，呈现出放大也不会失真的矢量彩色动图，甚至还能够做出足以令人沉迷一整天的Flash小游戏。
火柴人
Flash用第三方插件的身份，几乎制霸了网页媒体的标准，让W3C尴尬不已，甚至从某种程度上说，让真正的网页标准推广受阻。
2010年4月，苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。
乔布斯支持html5
2012年，安卓宣布不再支持Flash，从此flash彻底失去了移动端市场和地位。
2012年html5标准确立，html5在逐渐制霸移动端的地位时，也直接冲击了flash仅剩的桌面市场，flash桌面市场的份额在逐步下降。
各大浏览器逐步默认禁用Flash，现2019年几乎都全部禁用。
默认禁用Flash
Adobe将在2020年停止开发和更新flash。
2020年停止开发和更新flash
Flash以第三方插件的身份，做着平台该做的事情，但没有推动行业标准统一化，反而企图私立标准。
随着功能的增多，能解码编码H.264，能进行3D渲染，能播放7.1声道环绕声等，功能集于一身变得臃肿，效率变得低下。
Flash非常不安全。Flash能够运行相当复杂的代码，这让Flash非常容易被渗透。加上Adobe在安全方面的不上心，这令Flash安全问题频发。
Flash很不稳定。作为一个插件，它自身频频崩溃也就罢了，还经常拉着浏览器乃至操作系统一起殉情。
Flash加剧了手机的耗电量。
作用是在 HTML 页面中嵌入视频元素。Video定义视频，比如电影片段或其他视频流。
视频播放
有四个是必须的属性：src、controls、width、height属性。
视频播放代码
<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。
支持多格式的视频
video标签体系
上周有许多小朋友登录了冉爸的服务器，体验了有趣的scratch，也完成了自己的第一个作品，非常棒！
冉爸正在读scratch的源码，希望把它编译到网站上，让小朋友们通过网站轻松分享作品。在编译成功之前，我们可以将作品录制成视频再分享给朋友。可是，60秒的scratch视频文件，大小就超过20M，转发分享可一点也不方便，而且我们不知道对方的手机是否能够播放我们的视频格式。怎么办呢？
别着急，冉爸已经为大家找了一个方法，可以轻松地转码视频，再把视频链接放在网页里，这样无论是发送给朋友还是转发到朋友圈都很方便啦。
这么说，是要自己做网页了？嗯，是的。不过啊，一点也不难，小朋友们只要按照下面的步骤做，几分钟就可以做好自己的第一个网页了！
首先，想做个人网页的小朋友们要告诉冉爸，在网站服务器上给你们建好目录。举个栗子，小明同学想做个人博客，冉爸在服务器上配置好之后，会把网址：http://ranbaxuetang.cn/xiaoming 分给小明，这就是博客的家啦。
接下来，小明要在目录下建一个网页文档，比如hello.html。把以下代码复制到网页文档的开头，<head></head>元素是所有头部元素的容器，它们是用来描述文档、定义网页标题、外部资源、样式信息以及客户端脚本等等。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>冉爸学堂</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/css/style.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="/static/js/custom.js"></script> </head>
头部元素的具体内容及含义我们先不细说，后面用到的时候再做解释。复制好头部元素之后，接着再复制以下代码。这些是网页文档的主要内容。导航栏header引用了其它文件，除此之外，就是我们网页上的文字介绍和视频。
<body> <div id="header"></div> <div class="container"> <div class="row clearfix"> <div class="col-md-8 column"> <div style="margin:40px 0"> <h4> <font color="red">大家好~</font> </h4> <h4> <font color="green">这是我的第一个Scratch作品！</font> </h4> <h4> <font color="blue">希望你们喜欢。</font> </h4> </div> <video controls="controls" width="100%" poster="sample.png"> <source src="http://video.ranbaxuetang.cn/260f058280b745cf8753f901b7d27cd9/423b9a347c924a57887ca738e2aa9c8f-ecb935a2338b3b084da88bf43b0e2c16-fd.mp4" type="video/mp4" /> 您的浏览器不支持 video 标签。 </video> </div> </div> </div> </body> </html>
小明需要将scratch视频文件交给冉爸，待转码完成之后会得到一个视频链接，然后将视频链接替换<source></source>标签里的链接，保存网页文档，然后用浏览器打开 http://ranbaxuetang.cn/xiaoming/hello.html，就能看到自己编辑的文字和视频啦，通过朋友圈转发分享也变得非常容易。
小朋友们可以试着做自己的第一个网页，一点也不难~
、HTML代码如下：
<div id="player"></div>
二、JavaScript代码如下：
<script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
<script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
new window.FlvJsPlayer({
id: 'player',
isLive: false,
playsinline: true,
url: '/test/test.flv',
autoplay: true,
height: window.innerHeight,
width: window.innerWidth
});
</script>
*请认真填写需求信息，我们会在24小时内与您取得联系。
