Detailed introduction to HTML5 video playback

Recently, I have been using PhoneGap to develop an app. The app needs to play videos. I wanted to use html5 video directly, but it does not support horizontal screen playback when playing in full screen, so I had to give up. In the end, I decided to package a player myself to avoid the trouble of expanding functions in the future.

Recently I became obsessed with the word hi, so I named this player: hivideo.

Hivideo is a video player based on HTML5. It abandons the original video playback control bar style and rewrites it by itself. Supports pause, playback progress control, sound control, and full-screen playback. If you want to use HiVideo on a mobile phone, it also supports horizontal screen playback during full-screen playback.

jPlayer: Audio and video player based on HTML5/Flash

jPlayer is a completely free and open source written in JavaScript ( MIT)'s jQuery multimedia library plug-in (now also a Zepto plug-in);

jPlayer allows you to quickly write a cross-platform web page that supports audio and video playback.

jPlayer's rich API allows you to create a personalized multimedia application, so it has gained support and encouragement from more and more community members.

Official website: www.jplayer.cn

English: www.jplayer.org

1.Preparation

jquery.min .js, jquery.jplayer.min.js, jquery.jplayer.swf (official website download)

There is also an audio file

2. Code

<meta>
<title>清冽叮咚短信音</title>


<div>
    <div></div>
    <div>
        <div>
            <div>
                <ul>
                    <li><a>play</a></li>
                    <li><a>pause</a></li>
                    <li><a>stop</a></li>
                    <li><a>mute</a></li>
                    <li><a>unmute</a></li>
                    <li><a>max volume</a></li>
                </ul>
                <div>
                    <div>
                        <div></div>
                    </div>
                </div>
                <div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script></script>
<script></script>
<script>    
    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" //使用网络资源，自行设定音频文件
            }).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秒循环播放
</script>

##Attachment: Audio files supported by HTML5

File format Media type

MP3 Audio/mpeg
Ogg audio/ogg
Wav audio/wav

The support of each browser is different

The above is the detailed content of Detailed introduction to HTML5 video playback. For more information, please follow other related articles on the PHP Chinese website!