整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頻是網頁承載內容很重要的一個元素，也是必不可少的網頁表現形式（圖、文、表、視、音）之一。曾經網頁要想播放視頻、制作游戲，必須得用第三方插件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 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小時內與您取得聯系。
