jPlayer实例

最新推荐文章于 2024-06-15 09:35:22 发布
最新推荐文章于 2024-06-15 09:35:22 发布
阅读量194 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：http://www.cnblogs.com/praybb/articles/5448035.html
版权 
<!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="jPlayer-2.9.2/css/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="jPlayer-2.9.2/js/jquery.jplayer.js" type="text/javascript"></script>
    <script type="text/javascript"> //<![CDATA[
        $(document).ready(function () {
            $("#jquery_jplayer_1").jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        m4v: "10.mp4",
                        poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                    });
                },
                swfPath: "/jPlayer-2.9.2/js",
                supplied: "m4v",
                size: {
                    width: "640px", height: "360px", cssClass: "jp-video-360p"
                },
                smoothPlayBar: true,
                keyEnabled: 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">
                         </div>
                    <div class="jp-duration" role="timer" aria-label="duration">
                         </div>
                    <div class="jp-controls-holder">
                        <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-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-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 class="jp-details">
                        <div class="jp-title" aria-label="title">
                             </div>
                    </div>
                </div>
            </div>
            <div class="jp-no-solution">
                <span>更新要求</span> 要播放媒体，您需要更新您的浏览器到最近的版本或更新您的 <a href="http://get.adobe.com/flashplayer/"
                    target="_blank">Flash插件</a>.
            </div>
        </div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/praybb/articles/5448035.html

weixin_30412167
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jPlayer详细使用说明及完整demo
04-11
jPlayer详细使用说明及完整demo
jplayer demo jplayer例子
07-03
很好的网页播放，兼容，IE，FF，Chrome，此demo为没有界面。
jPlayer Demo案例
05-24
jPlayer影响播放插件，纯js
探索新一代音频视频播放体验：React-jPlayer
最新发布
gitblog_00067的博客
06-15 275
探索新一代音频视频播放体验：React-jPlayer 项目地址:https://gitcode.com/jplayer/react-jPlayer 在数字化媒体的浪潮中，寻找一个既能满足现代Web开发需求，又能够提供无缝跨浏览器兼容性的音视频播放解决方案显得尤为重要。今天，我们带来了一个充满潜力的开源宝藏——React-jPlayer，它完美地结合了React的灵活性与jPlayer的核心功能，...
记录下jplayer的简单demo
aiyaya2016的博客
09-13 166
jplay一个播放器的工具包，依赖于jquery或者zepto，有zepto所以相当于是PC和移动都支持。 它的官方文档为：http://www.jplayer.cn/ 同时也推出的react的支持包，具体参考：https://github.com/jplayer/react-jPlaylist 所以还是蛮好用的一个工具 以下是自己要使用时，写的个小demo，自己留存以便以后参考...
JPlayer-WEB.rar_jplayer_jplayer使用实例
09-14
然后，通过JavaScript初始化JPlayer实例，指定媒体源和配置项： ```javascript $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: ...
jPlayer2.1.0实例包
10-31
**jPlayer 2.1.0 实例包详解** **一、jPlayer 概述** jPlayer 是一个开源的 JavaScript 库，它基于强大的 jQuery 框架，旨在为网页提供高质量的 HTML5 视频和音频播放功能。jPlayer 的设计目标是使开发者能够轻松...
Jplayer demo资源
05-12
- **示例HTML文件**：展示不同功能和配置的Jplayer实例。 - **JavaScript文件**：包含Jplayer的配置和事件处理代码。 - **CSS文件**：可能包含预设或示例皮肤样式。 - **媒体文件**：用于演示的音频和视频文件。...
jQuery.jPlayer.2.2.0.demos.zip官方完整实例压缩包
04-27
快速学习jplayer的最好方法就是先套用他这个实例，都是拿来就可以使用的，不需要修改。
jquery音乐播放器插件jplayer特效代码
03-20
这段代码会设置播放器的媒体源，并在播放时暂停其他正在播放的jPlayer实例。`cssSelectorAncestor`用于指定播放器元素的容器，`swfPath`是Flash回退的路径，`supplied`定义了支持的媒体格式。 ### 使用帮助 在实际...
jPlayer-2.9.1播放器demo
08-02
jPlayer 播放器demo,直接修改资源地址即可使用。jPlayer 播放器demo,直接修改资源地址即可使用。
jplayer插件
08-24
jquery得一款免费多媒体插件。下载的demo在ie/firefox/safari/Google Chrome下都可以运行，需要安装quickTime。不支持html5的浏览器，请安装flashplayer。官方网站 www.jplayer.org。
react-jPlayer：用于ReactHTML5音频和视频播放器库
02-03
react-jPlayer 一个受插件启发但没有jQuery依赖关系的音频/视频播放器。 有关播放列表的功能，请参见 。 例子 安装 NPM npm install --save react-jplayer UMD 建议使用此软件包的方法是通过npm和webpack。 但是，如果您坚持手动添加.js和.css文件，则可以从/dist/文件夹获得未缩小版本和缩小版本。 该软件包的依赖关系已被UMD构建排除在外，因此您需要手动添加它们，如react-jPlayer-example的。 该模块将导出到名为ReactJPlayer的变量。 产品特点 与许多旧版Html5浏览器交叉兼容 完全
Jplayer一个简单的播放器代码Clean jPlayer skin
06-01
Jplayer一个简单的播放器代码Clean jPlayer skin
jplayer-htm5:html5中的自定义播放器
06-10
jplayer-htm5 html5 中的自定义播放器将按钮更改为字体真棒并自定义一些功能。 使用 scss 轻松设置样式。
jPlayer - 应用示例
weixin_30376083的博客
01-15 69
play pause stop mute unmute max volume repeat repeat off 邓福如 - 你好吗，天气好吗 更新提示 播放媒体，您需要更新您的浏览器到最新版本或更新您的 Flash 插件。 歌词不对？请上传新歌词： ...
jplayer 实战
jinyeweiyang的专栏
10-18 720
今天客户一个B2C服装类网上商城系统需要在网站里播放背景音乐。bgsound是不行的，因为只有IE支持这个标签。关键是要跨浏览器。  考虑jquery，发现jplayer可以实现这个效果。试了一下，门槛还算OK。  Html代码   script type="text/javascript" src="http://ajax.googleapis.com/ajax
一款非常强悍的HTML5视频和音频播放器jPlayer
jinyeweiyang的专栏
10-16 2245
今天要介绍的jPlayer也是基于HTML5的，不过与VideoJS不同是，jPlayer不仅支持播放视频，而且还能播放音频，并且提供了2套默认的皮肤，都非常漂亮，同时它也是基于jQuery的。 由于官方下载回来的文件只有几个核心JS，具体的例子还需要根据上面的教程自己搭建。所以为了方便大家欣赏和学习，我已经将几个demo整理好了，放到了青藤园网站上。下面就一起来看看每个demo的简要实现代
怎么知道jplayer的播放列表顺序
05-25
可以使用jQuery选择器来获取jPlayer的DOM元素，然后调用jPlayer()方法来创建jPlayer实例。例如： ``` var player = $("#jplayer").jPlayer(); ``` 2. 使用jPlayer提供的getPlaylist()方法来获取当前的播放列表。该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值