在网页中播放MP4格式视频代码：显示效果如下图，缺陷是不能自动适应页面大小，只能全屏

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<!-- Website Design By: www.happyworm.com -->

<title>Demo : jPlayer as a video player</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="dist/skin/pink.flag/css/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="dist/jplayer/jquery.jplayer.min.js"></script>

<script type="text/javascript">

//<![CDATA[

$(document).ready(function(){

    var videoSrc="dist/jplayer/test.mp4"

    $("#jquery_jplayer_1").jPlayer({

        ready: function () {

            $(this).jPlayer("setMedia", {

                title: "Big Buck Bunny",

                m4v: videoSrc,

                poster: "Big_Buck_Bunny_Trailer_480x270.png"

            });

        },

        swfPath: "jplayer",

        supplied: "webmv, ogv, m4v",

        size: {

            width: "740px",

            height: "360px",

            cssClass: "jp-video-360p"

        },

        useStateClassSkin: true,

        autoBlur: false,

        smoothPlayBar: true,

        keyEnabled: true,

        remainingDuration: true,

        toggleDuration: true

    });

});

//]]>

</script>

</head>

<body>

<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">

    <div class="jp-type-single">

        <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div class="jp-gui">

            <div class="jp-video-play">

                <button class="jp-video-play-icon" role="button" tabindex="0">play</button>

            </div>

            <div class="jp-interface">

                <div class="jp-progress">

                    <div class="jp-seek-bar">

                        <div class="jp-play-bar"></div>

                    </div>

                </div>

                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>

                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>

                <div class="jp-details">

                    <div class="jp-title" aria-label="title">&nbsp;</div>

                </div>

                <div class="jp-controls-holder">

                    <div class="jp-volume-controls">

                        <button class="jp-mute" role="button" tabindex="0">mute</button>

                        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>

                        <div class="jp-volume-bar">

                            <div class="jp-volume-bar-value"></div>

                        </div>

                    </div>

                    <div class="jp-controls">

                        <button class="jp-play" role="button" tabindex="0">play</button>

                        <button class="jp-stop" role="button" tabindex="0">stop</button>

                    </div>

                    <div class="jp-toggles">

                        <button class="jp-repeat" role="button" tabindex="0">repeat</button>

                        <button class="jp-full-screen" role="button" tabindex="0">full screen</button>

                    </div>

                </div>

            </div>

        </div>

        <div class="jp-no-solution">

            <span>Update Required</span>

            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.

        </div>

    </div>

</div>

</body>

</html>

JPlayer 官网

jPlayer 视频播放的更多相关文章

  1. jQuery的MP3、视频播放器jPlayer

    jplayer是一个纯代码的html5音乐.视频播放器. 支持单个.多个音乐或视频播放,支持各种主流的媒体文件. 使用方法: 1.提供json参数 [ { "title": &qu ...

  2. HTML5使用jplayer播放音频、视频

    首先推上神器 jPlayer:基于HTML5/Flash的音频.视频播放器 jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto ...

  3. 兼容IE7音乐播放器之jplayer的使用

    首先列出为何要写这篇随笔的原因: 1:兼容IE7 2:音乐播放器 3:任意控制播放器 1: 最近做的网站需要兼容IE7,在此之前已经写好了关于音乐播放的插件,火狐,IE8以上,以及谷歌浏览器等都可以随 ...

  4. 基于jPlayer的三分屏制作

    三分屏,这里的三分屏只是在一个播放器里同时播放三个视频,但是要求只有一个控制面板同时控制它们,要求它们共享一个时间轨道.这次只是简单的模拟了一下功能,并没有深入的研究. 首先,需要下载jPlayer, ...

  5. 利用开源jPlayer播放.flv视频文件

    最近工作中用到视频播放,在网上搜索对比了好几款开源播放插件后,觉得 jPlayer 是比较不错的,故作此记录! 接下来先快速的展示一下 利用jPlayer播放.flv视频的效果: <!DOCTY ...

  6. JPlayer Jquery video视频插件

    近日一直在搜关于视频的jquery插件,要求功能全,跨平台,百思不得其解,偶尔找到一个插件JPlayer,国产的,很全.为什么选择JPlayer 简单:几分钟就可以上手编码.部署 可定制:可以方便地用 ...

  7. Android开发学习之路--基于vitamio的视频播放器（二）

      终于把该忙的事情都忙得差不多了,接下来又可以开始good good study,day day up了.在Android开发学习之路–基于vitamio的视频播放器(一)中,主要讲了播放器的界面的 ...

  8. Android开发学习之路--基于vitamio的视频播放器（一）

      之前也试过vitamio这个库,后来不知道被什么事情给耽搁了,就没继续下去.近来觉得视频还是需要学习一下的,谁让直播那么火呢,就想着写一个简单的视频播放的app先吧.好了那就开始吧,暂时取名为JP ...

  9. jPlayer获取播放时间

    关于jPlayer的用法,可以参考:jPlayer 2.6.0开发者手册 http://www.jplayer.cn/developer-guide.html 视频播放例子: //视频播放 var v ...

随机推荐

  1. MySql（十五）：MySql架构设计——可扩展性设计之 Cache 与 Search 的利用

    前言 前面章节部分所分析的可扩展架构方案,基本上都是围绕在数据库自身来进行的,这样是否会使我们在寻求扩展性之路的思维受到“禁锢”,无法更为宽广的发散开来.这一章,我们就将跳出完全依靠数据库自身来改善扩 ...

  2. 【Unity】6.1 Unity中的C#脚本基础知识

    分类:Unity.C#.VS2015 创建日期:2016-04-16 一.简介 1.常用的C#数据类型 这里简单介绍用Unity开发游戏时,最常用的一些数据类型. (1)基本类型 int.float. ...

  3. 【Unity】2.7 检视器（Inspector）

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 Unity中的游戏是以包含网格.脚本.声音或灯光 (Lights) 等其他图形元素的多个游戏对象 (GameObject ...

  4. DatePicker的分割线颜色设置

    /** * * 设置时间选择器的分割线颜色 * @param datePicker */ private void setDatePickerDividerColor(DatePicker dateP ...

  5. Android学习之Design Support Library中TextInputLayout的使用

    今天学习了一个Android Design Support Library 中的TextInputLayout控件,感觉还不错,较之以往的Editetxt,多了几分灵活性,使用也非常easy,故此给大 ...

  6. haproxy-1.7.7 源码安装

    安装一下依赖 yum install openssl-devel openssl 编译安装 make TARGET=linux2628 USE_OPENSSL=1 ADDLIB=-lz make in ...

  7. nginx 环境下http和https(ssl)共存的方法

    80 443喘口共存之前是没问题的,但这次突然发现了这样的问题,htpps可以访问,但http不能访问会反回400 1xx.6x.x9.x8 - - [19/Jun/2017:16:04:28 +08 ...

  8. HBase 管理，性能调优

    设置 Hadoop 来扩展磁盘 I/O 现代服务器通常有多个磁盘硬件来提供大存储能力.这些磁盘通常配置成 RAID 阵列,作为它们的出厂设置.这在很多情况下是有益的,但对 Hadoop 却不是. Ha ...

  9. js实现冒泡事件，点击ul给子标签添加相同事件和阻止冒泡事件

    $('#LocalLife_PopUp_layer').find('.SelectCity_Cont ul').click(function(e){            var e=e||windo ...

  10. 如何在Oracle中一次执行多条sql语句 (.net C#)

    关键是不能换行,要加上begin ...sql... end;     每个SQL用:隔开,end后面必须加: 以下是拷贝于:http://www.cnblogs.com/teamleader/arc ...