HTML5播放器怎么讓部分瀏覽中播放視頻不全屏

定義H5播放器，在微信以及一些Android和iOS瀏覽中播放，存在容易被自帶瀏覽器接管的情況。接管后播放時(shí)，播放器的一些功能設(shè)置就不再顯示，比如水印信息等。

如果設(shè)置安卓和iOS手機(jī)在微信里打開不全屏的話，就可以正常顯示自定義播放器的參數(shù)，比如水印。

除了H5播放器可以設(shè)置是否全屏外，要想實(shí)現(xiàn)播放器自定義的一些效果更好展示，還可以進(jìn)行如下配置：

1、android下提示，讓用戶使用chrome 70以上內(nèi)核的瀏覽器（安卓自帶的）去播放，不允許他們?cè)谖⑿胚@些播放；

2、IOS下，也是chrome下可以； IOS下還可以支持微信播放，如果不允許全屏的話，也可以有水印。

3、電腦版下沒問題，基本主流瀏覽器都可以實(shí)現(xiàn)H5播放器自定義參數(shù)顯示。

多媒體標(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)頁(yè)上任意一元素全屏顯示，element.requsetFullScreen()開啟全屏顯示；

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

document.fullScreen檢測(cè)當(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新增的許多語(yǔ)義化標(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

creenfull.js --瀏覽器全屏插件

screenfull.js是用于跨瀏覽器使用JavaScript Fullscreen API的簡(jiǎn)單包裝器, 可讓您將頁(yè)面或任何元素全屏顯示, 并且平滑瀏覽器實(shí)現(xiàn)差異,

github地址：https://github.com/sindresorhus/screenfull.js 。

壓縮版下載地址: https://www.bootcdn.cn/screenfull.js/

項(xiàng)目中需要將后臺(tái)瀏覽器的窗口全屏, 也就是我們點(diǎn)擊一個(gè)按鈕要實(shí)現(xiàn)按F11全屏的效果。

在HTML5中,W3C制定了關(guān)于全屏的API, 就可以實(shí)現(xiàn)全屏幕的效果, 也可以讓頁(yè)面中的圖片,

視頻等全屏目前只有g(shù)oogle chrome 15 +, safri5.1+,firfox10+,IE11支持

var docElm=document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML=(document.fullscreen)? "" : "not ";}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML=(document.mozFullScreen)? "" : "not ";}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML=(document.webkitIsFullScreen)? "" : "not ";}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML=(document.msFullscreenElement)? "" : "not ";}, false);

實(shí)例:

http://robnyman.github.io/fullscreen/

html代碼:

<p>
<button id="view-fullscreen">Fullscreen</button>
<button id="cancel-fullscreen">Cancel fullscreen</button>
</p>

js代碼

在線咨詢

上一篇：Word轉(zhuǎn)HTML，輕松轉(zhuǎn)換，讓你成為網(wǎng)頁(yè)編輯大師！
下一篇：Android與javaweb數(shù)據(jù)交互

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

HTML5播放器怎么讓部分瀏覽中播放視頻不全屏

您的項(xiàng)目需求