HTML5 비디오 재생에 대한 자세한 소개-H5 튜토리얼-php.cn

HTML5 비디오 재생에 대한 자세한 소개

零下一度

풀어 주다： 2017-07-23 13:49:34

원래의

2548명이 탐색했습니다.

최근 PhoneGap을 이용하여 앱을 개발하고 있는데, 앱에서 동영상을 재생해야 하는데, html5 영상을 직접 사용해보고 싶었는데, 전체화면 재생시 가로화면 재생을 지원하지 않아서 포기하게 되었습니다. . 결국, 향후 기능 확장에 따른 어려움을 피하기 위해 플레이어를 직접 패키징하기로 결정했습니다.

요즘 안녕하세요라는 단어에 푹 빠져서 이 플레이어 이름을 hivideo로 지었습니다.

Hivideo는 HTML5 기반의 비디오 플레이어로, 원래의 비디오 재생 컨트롤 바 스타일을 버리고 자체적으로 다시 작성합니다. 일시정지, 재생 진행 제어, 사운드 제어, 전체 화면 재생을 지원합니다. 휴대폰에서 HiVideo를 사용하려는 경우 전체 화면 재생 중에 가로 화면 재생도 지원됩니다.

jPlayer: HTML5/Flash 기반 오디오 및 비디오 플레이어

jPlayer는 JavaScript로 작성된 완전 무료 오픈 소스(MIT) jQuery 멀티미디어 라이브러리 플러그인(현재는 Zepto 플러그인이기도 함)입니다.

jPlayer 오디오 및 비디오 재생을 지원하는 크로스 플랫폼웹페이지를 빠르게 작성할 수 있습니다.

jPlayer의 풍부한 API를 사용하면 개인화된 멀티미디어 애플리케이션을 만들 수 있으므로 점점 더 많은 커뮤니티 구성원으로부터 지원과 격려를 받고 있습니다.

공식 홈페이지: www.jplayer.cn

영어: www.jplayer.org

1.Prepare

jquery.min.js, jquery.jplayer.min.js, jquery.jplayer.swf(공식 홈페이지) 다운로드)

오디오 파일도 있습니다

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>

로그인 후 복사