在网页中播放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. php的opcode缓存

    前言:由php的运行机制决定,其实php在运行阶段我们也是可以进行缓存的从而提高程序运行效率,这就是我们常说的opcode缓存.1.简述php的运行机制(因为本文是写opcode缓存的所以这里只是简要 ...

  2. Android Manifest.xml文件的结构及作用

    原文链接:http://android.eoe.cn/topic/android_sdk 每一个应用程序在工程的根目录下必须要有一个AndroidManifest.xml文件(一定要用这个名称).这个 ...

  3. 【八】注入框架RoboGuice使用:(Your First Injected Fragment)

        上一篇我们简单的介绍了一下RoboGuice的使用([七]注入框架RoboGuice使用:(Your First Custom Binding)),今天我们来看下fragment的注解     ...

  4. android 的build.gradle 的API手册

    问题:对于用gradle的来配置java的开发者都能在GRADLE_HOME/docs/dsl找到如何对其build.gradle文件的具体属性. 但是对于开发android的开发者就不能对于官方的& ...

  5. 防CSRF攻击：一场由重复提交的问题引发的前端后端测试口水战

    重复提交,这是一直以来都会存在的问题,当在网站某个接口调用缓慢的时候就会有可能引起表单重复提交的问题,不论form提交,还是ajax提交都会有这样的问题,最近在某社交app上看到这么一幕,这个团队没有 ...

  6. Atitit jquery  1.4--v1.11  v1.12  v2.0  3.0 的新特性

    Atitit jquery  1.4--v1.11  v1.12  v2.0  3.0 的新特性 1.1. Jquery1.12  jQuery 2.2 和 1.12 新版本发布 - OPEN资讯.h ...

  7. 【Unity】4.6 灯光

    分类:Unity.C#.VS2015 创建日期:2016-04-11 一.简介 灯光(Light,也叫光源)是每一个场景的重要组成部分,用于照亮场景和对象,从而让游戏具有自己的个性和风格,比如利用灯光 ...

  8. 转：显示技术中的帧、帧数、帧率、 FPS

    在视频领域,电影.电视.数字视频等可视为随时间连续变换的许多张画面,而“帧( Frame)”是指每一张画面.而我们日常口语习惯或者说不严谨的交流中,通常对于帧数( Frames)与帧率( Frame ...

  9. Android 编程下的日志工具类

    package com.sunzn.app.util; import android.util.Log; public class Logger { public static int DEBUG_L ...

  10. (转)用stunnel给普通http通信加密

    转自:https://www.digitalocean.com/community/tutorials/how-to-set-up-an-ssl-tunnel-using-stunnel-on-ubu ...