在网页中播放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. ssh 反向代理和正向代理的文章

    搜索原因是,我希望访问家里内网的机器 技术要点: ssh 反向代理,正向代理 隧道 文章摘自: https://my.oschina.net/leejun2005/blog/94401 https:/ ...

  2. 设计模式-观察者模式(Observer Pattern)

    观察者模式(Observer Pattern):定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使他们能够自动更新自己. 观察者 ...

  3. ubuntu18.04分辨率

    一.使用xrandr命令可以查询当前的显示状态.找出被连接的显示器名称:VGA-1 jack@noi:~$ xrandr Screen : minimum x , current x , maximu ...

  4. 牛腩学Kotlin做Android应用

    牛腩学Kotlin做Android应用,蹭热度视频,边学边做, 01-kotlin插件安装及hello world 02-kotlin基础语法速览 哔哩哔哩观看地址:http://www.bilibi ...

  5. 2-2-求并集A=A∪B-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版

    课本源码部分 第2章  线性表 - 求并集A=A∪B ——<数据结构>-严蔚敏.吴伟民版        ★有疑问先阅读★ 源码使用说明  链接☛☛☛ <数据结构-C语言版>(严 ...

  6. FLINK 设计文档

    https://cwiki.apache.org/confluence/display/FLINK/Apache+Flink+Home https://cwiki.apache.org/conflue ...

  7. [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity

    Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...

  8. [Windows Azure] How to use the Windows Azure Blob Storage Service in .NET

    How to use the Windows Azure Blob Storage Service in .NET version 1.7 version 2.0 This guide will de ...

  9. MyBean-关于单实例插件

    单实例插件可以通过两个途径实现 第一个在注册时注册成单实例 beanFactory.RegisterBean(pvPluginID: String; pvClass: TClass;     pvSi ...

  10. webpack的css处理

    webpack打包处理css的时候需要两个loader: style-loader 和css-loader 安装: npm install style-loader css-loader --save ...