HTML5如何实现视频播放功能

这篇文章将为大家详细讲解有关HTML5如何实现视频播放功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、虚拟主机、营销软件、网站建设、柘荣网站维护、网站推广。

hivideo是一款基于html5的视频播放器，摒弃video原有的播放控制条样式，自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo，全屏播放时还支持横屏播放。

jPlayer :基于HTML5/Flash的音频、视频播放器

jPlayer是一个JavaScript写的完全免费和开源(MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件);

jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页.

jPlayer的丰富API可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。

官网:www.jplayer.cn

英文：www.jplayer.org

1.准备

jquery.min.js、jquery.jplayer.min.js、jquery.jplayer.swf （官网下载）

还有一个音频文件

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" //使用网络资源，自行设定音频文件
            }).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>
</body>
</html>

关于“HTML5如何实现视频播放功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

分享文章：HTML5如何实现视频播放功能
分享链接：https://www.cdcxhl.com/article12/jchegc.html

成都网站建设公司_创新互联，为您提供手机网站建设、自适应网站、网页设计公司、小程序开发、移动网站建设、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容