javascript實(shí)現(xiàn)瀏覽器自動(dòng)全屏顯示

3C制定了關(guān)于在HTML5中全屏的API但是只能由用戶事件觸發(fā)，所以不能自動(dòng)全屏；用戶事件觸發(fā)方法如下：

必須用戶事件觸發(fā)（可以是鼠標(biāo)事件，鍵盤事件等）

全屏樣式CSS

各種瀏覽器都提供了一個(gè)非常有用的全屏模式時(shí)的css樣式規(guī)則：

另外某些瀏覽器可以通過meta直接設(shè)置全屏

開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)開源的 HTML5 視頻播放器插件——MuiPlayer。

MuiPlayer 是一個(gè)開源的HTML5視頻播放插件，其默認(rèn)配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進(jìn)、循環(huán)播放、音量調(diào)節(jié)等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時(shí)適應(yīng)在PC、手機(jī)端播放。

特點(diǎn)

各瀏覽器平臺(tái)播放 ui 不能統(tǒng)一
ui 擴(kuò)展之間以及狀態(tài)處理容易產(chǎn)生沖突
在不同環(huán)境下（android、ios、pc）針對(duì) h5 video api 可能觸發(fā)事件的時(shí)機(jī)盡不相同
媒體格式存在各種兼容問題，muiplayer 處理了大多數(shù)在不同環(huán)境下播放的兼容問題
具有豐富的參數(shù)可以自定義播放器實(shí)例，通過輕松的配置即可完成自定義場景的視頻播放

快速開始

安裝

使用 npm 安裝：

npm i mui-player --save

使用 yarn 安裝：

yarn add mui-player

使用

1 使用 script 標(biāo)簽引入：

<!-- 引入基礎(chǔ)樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基礎(chǔ)腳本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

或者使用模塊管理器引入：

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2 定義播放器容器

<div id="mui-player"></div>

3 初始化構(gòu)建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個(gè)對(duì)象，該對(duì)象包括所有插件的配置
var mp=new MuiPlayer({
    container:'#mui-player',
    title:'標(biāo)題',
    src:'./static/media/media.mp4',
})

以上就能為初始化構(gòu)建一個(gè)具有默認(rèn)配置控件的視頻播放器。

更多API基礎(chǔ)配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

基礎(chǔ)效果

直播模式

播放字幕

播放彈幕

多窗口播放

更多內(nèi)容大家可自行前往閱讀。

開源地址：https://gitee.com/muiplayer/hello-muiplayer

多媒體標(biāo)簽:

音頻標(biāo)簽audio:

    <audio src="音頻文件的URL"></audio><!-- audio標(biāo)簽需要controls控件才可以播放音頻，controls的屬性值可以省略，如果URL為視頻格式文件，則只會(huì)播放音頻 -->

html5中通過audio標(biāo)簽實(shí)現(xiàn)音頻播放，支持的格式有.mp3/.ogg/.wav;注意：標(biāo)簽中必須要有controls屬性，否則不會(huì)播放;loop循環(huán)播放，autoplay自動(dòng)播放屬性（谷歌為了用戶體驗(yàn)禁用了這個(gè)功能）;一般為了兼容多個(gè)瀏覽器，audio標(biāo)簽中不寫src屬性，而是通過source標(biāo)簽寫入多個(gè)格式的音頻供瀏覽器選擇，若都不支持則輸入提示文字：


    <body>
      <audio controls loop autoplay>
        <source src="music/bgsound.mp3" type="audio/mpeg">
        <source src="music/movie04.ogg" type="audio/mpeg">
          若瀏覽器都不支持以上格式，在這里輸入提示文字即可
      </audio>
    </body>

視頻標(biāo)簽video:


    <video src="視頻文件的URL" controls="controls"></video><!-- video標(biāo)簽需要controls控件才可以播放視頻，controls的屬性值可以省略 -->

視頻一般比較大，如果是一般的視頻上傳，我們可以借助第三方視頻平臺(tái)，如騰訊、優(yōu)酷等，把視頻上傳到第三方平臺(tái)后分享，通過ifram標(biāo)簽插入到代碼中即可。

embed可以用來插入各種多媒體，例如Midi、Wav、AIFF、AU、MP3等格式，它支持音頻或視頻播放


    <embed src="" allowFullScreen="true" quality="high" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

html5中定義視頻通過video標(biāo)簽，其屬性：autoplay自動(dòng)播放（谷歌為了用戶體驗(yàn)禁用了這個(gè)功能,解決方法是給video標(biāo)簽加靜音屬性muted）、muted靜音、controls默認(rèn)播放控件、loop循環(huán)播放、poster加載等待的圖片、preload是否預(yù)先加載，其屬性值auto和none、width設(shè)置播放窗口的寬度、height設(shè)置播放窗口的高度，支持的格式有ogg/MPEG4/WebM等,一般video標(biāo)簽中不寫src屬性，而是通過source標(biāo)簽寫入多個(gè)格式的視頻供瀏覽器選擇，若都不支持則輸入提示文字：


    <body>
      <video controls loop autoplay poster="images/bg.jpg">
        <source src="video/movie04.ogg" type="video/ogg">
        <source src="video/mp4.mp4" type="video/mp4">
          若瀏覽器都不支持以上格式，在這里輸入提示文字即可
        </video>
    </body>

全屏方法：

HTML5允許用戶自定義網(wǎng)頁上任意一元素全屏顯示，element.requsetFullScreen()開啟全屏顯示；

同樣支持關(guān)閉全屏操作：document.cancelFullScreen()，注意：任何元素的全屏操作后都只需要給document關(guān)閉全屏即可。

document.fullScreen檢測當(dāng)前是否處于全屏狀態(tài)。

以上方法不支持ie9以下低版本瀏覽器，以及高級(jí)瀏覽器加私有前綴才可以使用（webkit內(nèi)核瀏覽器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome瀏覽器。Gecko內(nèi)核瀏覽器：mozRequestFullScreen、mozCancelFullScreen，如火狐瀏覽器；document.webkitIsFullScreen、document.mozFullScreen）


        <script>
            var btn=document.querySelector('input');
            var flag=true;
            if (flag) {
                btn.onclick=function() {
                    bodys.webkitRequestFullScreen();
                    !flag;
                };
            } else {
                btn.onclick=function() {
                    document.webkitCancelFullScreen();
                    !flag;
                };
            };
        </script>

自定義播放器：

播放器中常用方法：

播放器中常用屬性：

繼：

播放器中常用事件：

解決html5標(biāo)簽兼容性:

由于html5新增的許多語義化標(biāo)簽在低版本瀏覽器不兼容，這里推薦一款js插件來解決這個(gè)問題：html5shiv.js，其相關(guān)教程查閱官網(wǎng)：https://www.npmjs.com/package/html5shiv

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：vue項(xiàng)目頁面切換到默認(rèn)顯示頂部
下一篇：30款花店WEB網(wǎng)頁設(shè)計(jì)靈感

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

javascript實(shí)現(xiàn)瀏覽器自動(dòng)全屏顯示

特點(diǎn)

快速開始

效果演示

您的項(xiàng)目需求