mediaElement 示例

最新推荐文章于 2024-03-09 15:35:42 发布

会吃猫的的鱼

最新推荐文章于 2024-03-09 15:35:42 发布

阅读量4.8k

点赞数 1

分类专栏： javascript web前台技术文章标签： javascript jquery html5 视频插件

本文链接：https://blog.csdn.net/hcmdy/article/details/23907285

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

web前台技术

12 篇文章 0 订阅

订阅专栏

MediaElement是一个HTML音频和视频解决方案，你可以：

使用HTML5的视频和音频标签及其CSS生成播放器
对于老的浏览器，使用自定义的Flash和Silverlight播放器来模拟HTML5
支持众多应用的插件，jQuery，Wordpress，Drupel，Joomla等等

下面这个示例请参考

完整的文件我已打包到：http://download.csdn.net/detail/xiananliu/7205539

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
	<script src="build/jquery.js"></script>		
	<script src="build/mediaelement-and-player.min.js"></script>
    <link rel="stylesheet" href="build/mediaelementplayer.css" />
    
	<script type="text/javascript">
    
		$(document).ready(function() { 
		   
		   

		var player = new MediaElementPlayer('video',{ 
			  alwaysShowControls: false, 
			  
			 features: ['playpause','progress','current','duration','tracks','volume','fullscreen'] ,
			 
			success: function(media, node, player) {
				 media.addEventListener('play',function(){
					 
					$('marquee span').text($('video').attr('src')); 
					
					 
					 
					 })
				 
				 
				 
				 
				 }
		   });
		   

		   $('div#src button').eq(0).click(function(){
			  
			player.setSrc($('input').val());
			//alert(1111)
			player.play();
			 //alert(2222);
				   });
				   
			$('div#example a').click(function(){
				player.setSrc($(this).attr('href'));
				player.play();
				
				return false;
				});
			$('div#src button').eq(1).click(function(){
			
				//var s= getvl(document.getElementById("file"));
				var s2=$('#file').val();
				//var x='C:\\Users\\Administrator\\Desktop\\johndyer-mediaelement-4af8088\\media\\echo-hereweare.mp4';
				player.setSrc(s2)
				player.play();
				
				});
			
				   
		}); 
		
		
		
		
	</script> 
    <style type="text/css">
	div#mainContent
	{
		width:900px;
		margin:0 auto;
		
		
		
		
	}
	div#player {
		width:800px;
		height:412px;
		margin:0 auto;
		
		
		
		
		}
    div#src
	{
		text-align:center;
		margin-top:10px;	
		
		
		}
	 div#topbar
	 {
		 background:#000;
		 color:white;
		 
	}
	
		
	div#src input
	{
		width:600px;
		
		
	}
	div#example
	{
		margin-top:20px;
		text-align:center;
		
		
	}
	div#example a
	{
		margin:0 10px;
		color:#000;
		
	}
	
	.ie8 .me-plugin { position: static; }
    </style>
    
    
      
</head>

<body>

	<div id="mainContent">
        
       
        <div id="player">
        	<div id="topbar">
            	<marquee>正在播放：<span></span></marquee>
            
            </div>
            <video src="echo-hereweare.mp4"  width="800" height="400" >
          
            </video>
        
        </div>
        
        <div id="src">
        	<table align="center" cellpadding="0" cellspacing="0">
            <tr>
            	<td align="right">视频源：</td>
                <td><input type="text" /> </td>
                <td><button> 播放</button></td>
            </tr>
            <tr>
            	<td align="right"> 本地文件：</td>
                <td align="left"><input id="file" type="file"/></td>
                <td><button> 播放</button></td>
            </tr>
            <tr>
            	<td colspan="3">本地播放仅支持IE浏览器！其他浏览器请手动复制本地文件地址到“视频源”播放</td>
            
            </tr>
            
            </table>
    
           
        
        </div>
		<div id='example'>
        	 <a href="http://video-js.zencoder.com/oceans-clip.mp4">视频示例1</a>     
        	 <a href="http://www.w3school.com.cn/example/html5/mov_bbb.mp4">视频示例2</a>             
             <a href="http://html5video.org/media/sintel.mp4">视频示例3</a>
             <br>
             <a href="echo-hereweare.mp4">视频示例mp4</a>     
        	 <a href="echo-hereweare.ogv">视频示例ogv</a>             
             <a href="echo-hereweare.webm">视频示例webm</a>
        		
        
        </div>
	
    </div>


</body>
</html>