HTML5開發流媒體視頻在線直播系統“直播平臺核心技

HTML5開發流媒體視頻在線直播系統“直播平臺核心技術”

昨晚公開課程的課題：【HTML5開發流媒體視頻在線直播系統】

而這項技術現在應用的也很廣泛，比如現在一些證券公司流行的在線開戶驗證系統，還有現在很火的直播平臺，而在以后隨著HTML5的應用比重慢慢增大，這些最新潮的技術也會隨之火熱，當然學會這些技術對于找工作來說的幫助還是很大的。

需要昨晚的HTML5開發流媒體視頻在線直播系統視頻的請點擊關注查看置頂文章哦！

效果圖：

在線直播效果圖

言

Notification API 是 HTML5 新增的桌面通知 API，用于向用戶顯示通知信息。該通知是脫離瀏覽器的，即使用戶沒有停留在當前標簽頁，甚至最小化了瀏覽器，該通知信息也一樣會置頂顯示出來。

用戶權限

想要向用戶顯示通知消息，需要獲取用戶權限，而相同的域名只需要獲取一次權限。只有用戶允許的權限下，Notification 才能起到作用，避免某些網站的廣告濫用 Notification 或其它給用戶造成影響。那么如何知道用戶到底是允不允許的？

Notification.permission 該屬性用于表明當前通知顯示的授權狀態，可能的值包括：

default ：不知道用戶的選擇，默認。granted ：用戶允許。denied ：用戶拒絕。

if(Notification.permission==='granted'){
 console.log('用戶允許通知');
}else if(Notification.permission==='denied'){
 console.log('用戶拒絕通知');
}else{
 console.log('用戶還沒選擇，去向用戶申請權限吧');
}

請求權限

當用戶還沒選擇的時候，我們需要向用戶去請求權限。Notification 對象提供了 requestPermission() 方法請求用戶當前來源的權限以顯示通知。

以前基于回調的語法已經棄用（當然在現在的瀏覽器中還是能用的），最新的規范已將此方法更新為基于 promise 的語法：

Notification.requestPermission().then(function(permission) {
 if(permission==='granted'){
 console.log('用戶允許通知');
 }else if(permission==='denied'){
 console.log('用戶拒絕通知');
 }
});

推送通知

獲取用戶授權之后，就可以推送通知了。

var notification=new Notification(title, options)

參數如下：

title：通知的標題options：通知的設置選項（可選）。
body：通知的內容。tag：代表通知的一個識別標簽，相同tag時只會打開同一個通知窗口。
icon：要在通知中顯示的圖標的URL。
image：要在通知中顯示的圖像的URL。
data：想要和通知關聯的任務類型的數據。
requireInteraction：通知保持有效不自動關閉，默認為false。

還有一些其他的參數，因為用不了或者沒什么用這里就沒必要說了。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧',
 tag: 'linxin',
 icon: 'http://blog.gdfengshuo.com/images/avatar.jpg',
 requireInteraction: true
})

通知消息的效果圖如下：

關閉通知

從上面的參數可以看出，并沒有一個參數用來配置顯示時長的。我想要它 3s 后自動關閉的話，這時可以調用 close() 方法來關閉通知。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧'
})

setTimeout(function() {
 n.close();
}, 3000);

事件

Notification 接口的 onclick屬性指定一個事件偵聽器來接收 click 事件。當點擊通知窗口時會觸發相應事件，比如打開一個網址，引導用戶回到自己的網站去。

var n=new Notification('狀態更新提醒',{
 body: '你的朋友圈有3條新狀態，快去查看吧',
 data: {
 url: 'http://blog.gdfengshuo.com'
 }
})
n.onclick=function(){
 window.open(n.data.url, '_blank'); // 打開網址
 n.close(); // 并且關閉通知
}

應用場景

前面說那么多，其實就是為了用。那么到底哪些地方可以用到呢？

現在網站的消息提醒，大多數都是在消息中心顯示個消息數量，然后發郵件告訴用戶，這流程完全沒有錯。不過像我這種用戶，覺得別人點個贊，收藏一下都要發個郵件提醒我，老是要去刪郵件（強迫癥），我是覺得挺煩的甚至關閉了郵件提醒。

當然這里并不是說要用 Notification，畢竟它和郵件的功能完全不一樣。

我覺得比較適合的是新聞網站。用戶瀏覽新聞時，可以推送給用戶實時新聞。以騰訊體育為例，它就使用了 Notification API。在頁面中引入了一個 notification2017_v0118.js，有興趣可以看看別人是怎么成熟的使用的。

一進入頁面，就獲取授權，同時自己頁面有個浮動框提示你允許授權。如果允許之后，就開始給你推送通知了。不過它在關閉標簽卡的時候，通知也會被關閉，那是因為監聽了頁面 beforeunload 事件。

function addOnBeforeUnload(e) {
 FERD_NavNotice.notification.close();
}
if(window.attachEvent){
 window.attachEvent('onbeforeunload', addOnBeforeUnload);
} else {
 window.addEventListener('beforeunload', addOnBeforeUnload, false);
}

兼容

說到兼容，自然是倒下一大片，而且各瀏覽器的表現也會有點差異。移動端的幾乎全倒，PC端的還好大多都能支持，除了IE。所以使用前，需要先檢查一下瀏覽器是否支持 Notification。

TML5的結構化標簽，對搜索引擎更友好

li 標簽對不利于搜索引擎的收錄，盡量少用

banner圖片一般擁有版權，不需要搜索引擎收錄，因此可以使用ul + li

<samp></samp>可用于淺色副標題

display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加font-size:0;

sublime安裝csscomb插件

選中css代碼，ctrl+shift+c 自動整理好代碼

排序前：

排序后：

此時存在多余的空行

解決方法：

安裝cssformat插件，對代碼執行edit->cssformat->expanded 即可刪除空行

選中單句樣式前面的空白部分（即tab空位）

然后alt+f3 會統一選中所有tab留白

按一次刪除，再按一次刪除，再空一格

此時這個效果：

然后按向下箭頭，按向左箭頭，按刪除一次，再加個空格

此時效果

再向下箭頭，再刪除

此時效果

css樣式代碼美化完畢。

新標簽元素的瀏覽器兼容解決：

header,nav,section,aside,article,footer{display: block;}

最后曬出所有代碼

index.html

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <a href="#"><img src="cat-little.jpg"></a>
            <nav>
                <a href="#" class="active">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
                <a href="#">導航</a>
            </nav>
        </div>
    </header>

    <section class="banner">
        <ul>
            <li class="left"><img src="banner1.jpg"></li>
            <li class="active"><img src="banner3.jpg"></li>
            <li class="right"><img src="banner2.jpg"></li>
        </ul>
    </section>

    <section class="main">
        <aside>
            <h1>左邊<samp>標題</samp></h1>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p1.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p2.jpg"></dd>
            </dl>
            <dl>
                <dt>小標題</dt>
                <dd class="text">文字內容哦~</dd>
                <dd class="pic"><img src="p3.jpg"></dd>
            </dl>
        </aside>
        <article>
            <h1>右邊<samp>標題</samp></h1>
            <p>這是右邊文章內容哦~</p>
            <img src="qrt.jpg">
            <p>這是右邊文章內容哦~</p>
        </article>
    </section>

    <footer>
        <div class="container">
            <p>版權信息</p>
            <span>
                <img src="b1.jpg">
                <img src="b2.jpg">
                <img src="b3.jpg">
            </span>
        </div>        
    </footer>
</body>
</html>

style.css

* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}

/*瀏覽器兼容解決*/
header,nav,section,aside,article,footer{display: block;}

/*頭部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}

/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0;    /*設置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設置在左邊*/ left: 0;}
.banner ul li.right { /*設置在右邊*/ right: 0;}

/*主體部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}

/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */

效果圖

原文鏈接：https://www.cnblogs.com/chenyingying0/p/12250255.html

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，可以觀看【置頂】文章。也可以私信【1】領取最新前端練手實戰項目

在線咨詢

上一篇：GCTT 出品 - 使用 Go 語言完成 HTTP
下一篇：第9節 Javascript數據類型轉換-零點程序員

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5開發流媒體視頻在線直播系統“直播平臺核心技

效果圖：

您的項目需求