在网页中播放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. 通过maven中properties标签定义spring版本号

    一 发现问题 在pom.xml中添加依赖时语法如下 <dependency>  <groupId>org.springframework</groupId>  &l ...

  2. eclipse自动切换到debug视图

    原文出自:http://blog.csdn.net/yizhizouxiaqu/article/details/7594502 当弹出"Confir Perspective Switch&q ...

  3. Spring Boot 2.0 利用 Spring Security 实现简单的OAuth2.0认证方式1

    0. 前言 之前帐号认证用过自己写的进行匹配,现在要学会使用标准了.准备了解和使用这个OAuth2.0协议. 1. 配置 1.1 配置pom.xml 有些可能会用不到,我把我项目中用到的所有包都贴出来 ...

  4. angular-1.3 之ng-model-options指令

    ng-model-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法. ng-model-options允许我们控制ng-model何时进行同步. 比如:1.当某个确 ...

  5. ny106 背包问题

    背包问题                                                时间限制:3000 ms  |  内存限制:65535 KB                   ...

  6. Asp.Net发送手机验证码

    C#发送手机验证码,平台有很多,我就说说其中的1个平台 测试环境:.net2.0 测试效果:速度还可以,10秒内接收短信 1.去http://www.yuntongxun.com注册,会送8元测试金额 ...

  7. yum卸载失败Error in PREUN scriptlet in rpm package postgresql-server

    yum --setopt=tsflags=noscripts remove 参考 https://serverfault.com/questions/613256/yum-error-in-preun ...

  8. 【转】Linux mysql停止失败的解决办法 Stopping MySQL database server mysqld [fail]

    root@ubuntu:/# /etc/init.d/mysql stop * Stopping MySQL database server mysqld [fail] root@ubuntu:/# ...

  9. 【机器学习】EM的算法

    EM的算法流程: 初始化分布参数θ: 重复以下步骤直到收敛:         E步骤:根据参数初始值或上一次迭代的模型参数来计算出隐性变量的后验概率,其实就是隐性变量的期望.作为隐藏变量的现估计值: ...

  10. java 多线程 19： ReentrantLock 与 Condition

    ReentrantLock ReentrantLock,一个可重入的互斥锁,它具有与使用synchronized方法和语句所访问的隐式监视器锁相同的一些基本行为和语义,但功能更强大. Reentran ...