MediaElement.js 跨域请求视频播放
浏览器跨域问题一直以来都是作为前端开发人员常见的问题，所以今天学习了下如何使浏览器跨域请求资源
需要了解的知识
-域（主域，子域，什么是跨域） 简单来说由于浏览器同源策略，凡是发送请求url的协议（http，https）、域名（baidu.com，sina.com）、端口（80，81）三者之间任意一与当前页面地址不同即为跨域 详解：http://www.cnblogs.com/dojo-lzz/p/4265637.html
-jsonp（这里推荐 http://kb.cnblogs.com/page/139725/ 的文章，不了解的话可以去看下，讲解非常详细）
-了解mediaelement.js的API（ http://www.mediaelementjs.com/#api https://github.com/johndyer/mediaelement 因为全是英文，可能不是很想看，但是推荐每一行都认真翻译看看）
因为要跨域，所以我在本地分别搭建了IIS和nodejs服务器，通过不同端口实现跨域
直接上代码吧
首先是视频显示的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mediaelement</title>
<!-- 引用jquery mediaElement -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="mediaelement-master/mediaelement-and-player.min.js"></script>
<!-- 引用CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="mediaelement-master/mediaelementplayer.css">
</head>
<body>
<ul>
<li id="video-1" data-vid="1" class="playitem cc">
<h5>第一部</h5>
</li>
<li id="video-2" data-vid="2" class="playitem cc">
<h5>第二部</h5>
</li>
<li id="video-3" data-vid="3" class="playitem cc">
<h5>第三部</h5>
</li>
</ul>
<video id="player" width="800" height="400" poster="1.jpg" controls="controls">
<object width="800" height="400" type="application/x-shockwave-flash" data="mediaelement-master/flashmediaelement.swf">
<param name="movie" value="mediaelement-master/flashmediaelement.swf" />
<img src="1.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
<script type="text/javascript">
var playList = $('li.playitem.cc');
var player = document.getElementById('player');
playList.on('click',function( e ){
e.preventDefault();
$('.me-plugin').remove();
var vid = $(this).attr('data-vid');
// 跨域请求
$.ajax({
url: 'http://192.168.1.118:8000/video/js.js?code=' + vid,
type: 'get',
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback:"flightHandler",
success: function( json ) {
player.src = json[vid];
MediaElement( player,{
success: function ( media ) {
media.play();
}
});
},
});
});
</script>
</body>
</html>
这里调用了mediaelement.js的三个文件：mediaelementplayer.css样式 jquery-1.12.2.js 和 mediaelement-and-player.min.js
jsonp引用的jsonp.js文件
flightHandler({
"1":"http://192.168.1.109:8000/video/mp4//mp4.mp4",
"2":"http://192.168.1.109:8000/video/webm/webm.webm",
"3":"http://192.168.1.109:8000/video/m3u8/index.m3u8"
});
到这里就好了，现在只要将视频放在jsonp的路径下，首页就可以调用
因为是初学，如果有错误，敬请指正。
