HTML5如何實現(xiàn)視頻播放功能

發(fā)布時間：2021-09-13 16:42:51 來源：億速云閱讀：145 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)HTML5如何實現(xiàn)視頻播放功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

hivideo是一款基于html5的視頻播放器，摒棄video原有的播放控制條樣式，自己重寫了一次。支持暫停、播放進度控制、聲音控制、全屏播放。如果是要在手機端使用hivideo，全屏播放時還支持橫屏播放。

jPlayer : 基于HTML5/Flash的音頻、視頻播放器

jPlayer是一個JavaScript寫的完全免費和開源 (MIT) 的jQuery多媒體庫插件 (現(xiàn)在也是一個Zepto插件);

jPlayer可以讓你迅速編寫一個跨平臺的支持音頻和視頻播放的網(wǎng)頁.

jPlayer的豐富API可以讓你創(chuàng)建一個個性化多媒體應(yīng)用，因此也獲得越來越多的社區(qū)成員的支持和鼓勵。

官網(wǎng):www.jplayer.cn

英文：www.jplayer.org

1.準備

jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官網(wǎng)下載）

還有一個音頻文件

2.代碼

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>清冽叮咚短信音</title>
</head>
<body>
<div id="play-box">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="jquery.min.js?1.1.11" type="text/javascript"></script>
<script src="jquery.jplayer.min.js?1.1.11" type="text/javascript"></script>
<script type="text/javascript">    
    function toplay(){ 
        var playerc = $("#jquery_jplayer_1"); 
        if (playerc.data().jPlayer && playerc.data().jPlayer.internal.ready === true) {
            playerc.jPlayer("setMedia", {
                m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //使用網(wǎng)絡(luò)資源，自行設(shè)定音頻文件
            }).jPlayer("play");//jPlayer("play") 用來自動播放
        }else {
            playerc.jPlayer({
                ready: function() {
                    $(this).jPlayer("setMedia", {
                        m4a: "http://cdnringhlt.shoujiduoduo.com/ringres/user/a24/140/14972140.aac" //同上
                    }).jPlayer("play");//同上
                },
                swfPath: "include/javascript",
                supplied: "m4a"  //acc屬于M4A
            });
        }
    }  
    setInterval(function(){
         toplay();
    },3000);//3秒循環(huán)播放
</script>
</body>
</html>

關(guān)于“HTML5如何實現(xiàn)視頻播放功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

HTML5如何實現(xiàn)視頻播放功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽