首页 > JavaScript, JQuery > 利用jQuery实现弹出的视频播放器
201212月9

利用jQuery实现弹出的视频播放器

背景

       最近给客户做一个项目,客户需要一个视频播放的功能,但是视频不可以重新打开新的页面进行播放,需要在原有页面的基础上弹出一个窗口实现视频播放的效果,最后项目组的人在网上找了一个利用jquery、css的方式实现弹出窗口播放视频的功能,所以讲代码和大家分享下。

实现的效果图

jquery实现的视频播放器效果图

主页面代码

<head>
  <title>视频播放器</title>
  <script src="jquery-1.8.2.js"></script>
  <script src="jquery-ui-1.9.1.custom.js"></script>
  <script>
    $.fx.speeds._default = 1000;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
			height: 440,
			width:666
			
        });
 
        $( "#opener" ).click(function() {
		     document.getElementById("dialog").style.display="block";
            $( "#dialog" ).dialog( "open" );
            return false;
        });
    });
    </script>
</head>
<body>
	<div id="dialog" title="Basic dialog" style="display:none">
		<embed src="videos/aa.wmv" width="640" 
		height="360" autostart="false"></embed>
	</div>
	<button id="opener">Open Dialog</button>
</body>

demos.css代码

table {
	font-size: 1em;
}

.demo-description {
	clear: both;
	padding: 12px;
	font-size: 1.3em;
	line-height: 1.4em;
}

.ui-draggable, .ui-droppable {
	background-position: top;
}

文章作者: iitshare
本文地址:http://www.iitshare.com/jquery-video-playback.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

更多

2 Responses to “利用jQuery实现弹出的视频播放器”

  1. #1 杨洋洋 回复 | 引用 Post:2014-05-05 13:41

    可以提供下那两个js吗

    • #2 iitshare 回复 | 引用 Post:2014-05-30 12:21

      那js是jquery的,在网上直接下载即可

发表评论