在网页中播放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. idea搭建javaweb项目 Artifacts生成

    菜单:File - > Project Structure 图1 图2:静态资源文件 图3:java文件编译到WEB-INF/classes 图4:Inherit project compile ...

  2. Oozie工作流属性配置的方式与策略

    本文原文出处: http://blog.csdn.net/bluishglc/article/details/46049817 Oozie工作流属性配置的三种方式 Oozie有三种方法可以给工作流提供 ...

  3. RecyclerView 与 ItemTouchHelper 实现拖拽效果

    截图 需求 App 开发新的需求,要求 RecyclerView 实现的九宫格样式可以拖拽,松手以后变更位置,类似于手机桌面拖动 app 变更位置. 分析 经过搜索,发现 support 中带有一个类 ...

  4. Shiro系列(2) - 权限模型以及权限分配的两种方式

    1. 顶级账户分配权限用户需要被分配相应的权限才可访问相应的资源.权限是对于资源的操作一张许可证.给用户分配资源权限需要将权限的相关信息保存到数据库.这些相关内容包含:用户信息.权限管理.用户分配的权 ...

  5. Xilinx vivado迅雷下载地址（所有版本）

    注:其实该方法适用于提取Xilinx官网的任意工具的任意版本的迅雷下载地址 ①进入Xilinx官网,进入Device->Design Tools,选择你想要下载的任意工具.②进入新web页面,右 ...

  6. [na]tcp&udp层各协议小结

    TCP和UDP 传输层功能: 可靠性:序列号.确认号&flag位 有效性:win滑动窗口 这篇目录索引: Tcp可靠性 Tcp流控 Tcp拥塞控制 Tcp运输连接管理 TCP的可靠性和流控 为 ...

  7. tiny-cnn开源库的使用(MNIST)

    tiny-cnn是一个基于CNN的开源库,它的License是BSD 3-Clause.作者也一直在维护更新,对进一步掌握CNN非常有帮助,因此以下介绍下tiny-cnn在windows7 64bit ...

  8. Android使用Custom debug keystore

    有时候须要用到第三方API的时候,须要一个key store 的SH1值,比如使用百度地图API,假设是协同开发,就须要全部Eclipse使用同一keystore. 例如以下图所看到的: 这里须要注意 ...

  9. cuteftp 9 显示中文乱码

    当用FTP连接空间时,中文命名的文件名会显示乱码,原来是编码设置错误．怎么修改呢? 修改方法如下: 选择. 工具--> 全局选项->传输:1. 传输方法: ASCII2. SFTP档案名称 ...

  10. 【数据库】悲观锁与乐观锁与MySQL的MVCC实现简述

    悲观锁 悲观锁,就是一种悲观心态的锁,每次访问数据时都会锁定数据: 乐观锁 乐观锁,就是一种乐观心态的锁,每次访问数据时并不锁定数据,期待数据并没作修改,如果数据没被修改则作具体的业务 应用程序上使用 ...