溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML5新標(biāo)簽-Video

發(fā)布時(shí)間：2020-06-26 22:26:22 來源：網(wǎng)絡(luò) 閱讀：639 作者：frwupeng517 欄目：移動(dòng)開發(fā)

HTML5的video新標(biāo)簽使用起來非常簡(jiǎn)單，功能也著實(shí)強(qiáng)大，簡(jiǎn)單的幾行代碼就可以實(shí)現(xiàn)視頻播放功能。尤其在蘋果公司拒絕在IOS設(shè)備上支持Flash的時(shí)候，HTML5的公開支持度得到了極大的提升

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5新標(biāo)簽-Video</title>
</head>
<body>

    <video id="player" width="600" height="400" controls preload="auto">
        <source src="video/birds.mp4" type="video/mp4">
        <source src="video/birds.ogg" type="video/ogg"> 
        
        您的瀏覽器版本太低了，不支持video播放，請(qǐng)升級(jí)到最新版本！
    </video>

</body>
</html>


測(cè)試了一下，在（Firefox 3.5+、Chrome 4+、 Safari 4、 Opera 10.5+、Internet Explorer 9+、 iOS 3.2+、Opera Mobile 11+、Android 2.3+）都沒問題


目前絕大多數(shù)現(xiàn)代瀏覽器都支持MP4格式，在《響應(yīng)式Web設(shè)計(jì)》書中提到“一些瀏覽器支持某一套視頻和音頻文件格式，而另一些瀏覽器則支持其他格式。例如Safari 只允許在<video>和<audio>元素中使用MP4/H.264/AAC 媒體文件，而Firefox 和Opera 則只支持Ogg 和WebM”。至少我在做demo的時(shí)候發(fā)現(xiàn)Firefox和Opera是支持MP4的，可能是版本較新的原因，但還是把OGG格式也添加進(jìn)去了

HTML5新標(biāo)簽-Video

如我們所知，IE8及以下瀏覽器都不支持HTML5視頻和音頻，為了兼容老IE，我們可以提供一個(gè)優(yōu)雅的備用方案，追加一個(gè)Flash

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5新標(biāo)簽-Video</title>
</head>
<body>

    <video id="player" width="600" height="400" controls preload="auto">
        <source src="video/birds.mp4" type="video/mp4">
        <source src="video/birds.ogg" type="video/ogg">
        <object width="600" height="400" type="application/x-shockwave-flash" data="video/birds.swf">
            <param name="movie" value="video/birds.swf">
            <param name="flashvars" value="controlbar=over&amp; p_w_picpath=; file=video/birds.mp4">

        您的瀏覽器版本太低了，不支持video播放，請(qǐng)升級(jí)到最新版本！
    </video>

</body>
</html>


在IE8及更低版本瀏覽器中，一樣可以播放視頻，只不過效果就沒有那么好了

HTML5新標(biāo)簽-Video

這里還有一個(gè)視頻格式轉(zhuǎn)換的網(wǎng)站，功能強(qiáng)大，無需下載APP，界面也非常的干凈、清爽  http://www.apowersoft.com/free-online-video-converter


HTML5新標(biāo)簽-Video



向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手