标签：
浏览器跨域问题一直以来都是作为前端开发人员常见的问题，所以今天学习了下如何使浏览器跨域请求资源
需要了解的知识
-域（主域，子域，什么是跨域） 简单来说由于浏览器同源策略，凡是发送请求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>video</title>
<link rel="stylesheet" type="text/css" href="mediaelement-master/mediaelementplayer.css">
</head>
<body>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript" src="mediaelement-master/mediaelement-and-player.min.js"></script>
<video class="me-plugin" width="1000" height="500" controls="controls" poster="1.jpg"></video>
<ul style="margin-top: 600px; position: absolute;">
<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>
<script type="text/javascript">
var playList = $(‘li.playitem.cc‘);
var player = document.getElementsByClassName(‘me-plugin‘);
playList.on(‘click‘,function(e){
e.preventDefault();
player.pause();
var vid = $(this).attr(‘data-vid‘);
$.ajax({
url: ‘http://192.168.1.109:8000/video/jsonp.js?code=‘ + vid,
type: ‘get‘,
dataType: ‘jsonp‘,
jsonp: "callback",
jsonpCallback:"flightHandler",
success: function( json ) {
player.src = json[vid];
new MediaElement(player,{
success: function ( media ) {
media.play();
}
})
},
error: function() {
console.log("error");
},
})
});
</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的路径下，首页就可以调用
因为是初学，如果有错误，敬请指正。
标签：
原文地址：http://www.cnblogs.com/chendongbky/p/5332457.html
