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>

Copy after login

##Attachment: Audio files supported by HTML5

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

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!