浏览器跨域问题一直以来都是作为前端开发人员常见的问题，所以今天学习了下如何使浏览器跨域请求资源

需要了解的知识

-域（主域，子域，什么是跨域）　　简单来说由于浏览器同源策略，凡是发送请求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的路径下，首页就可以调用

因为是初学，如果有错误，敬请指正。

MediaElement.js之浏览器跨域请求视频播放的更多相关文章

  1. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  2. Jsonp的js实现，跨域请求，同源策略机制

    Jsonp的js实现,跨域请求,同源策略机制1.跨域请求:请求URL的协议,域名,端口三者之间任意一个与当前页面地址不同即为跨域 存在跨域的情况: 网络协议不同,端口不通,域名不同,子域名不同,域名和 ...

  3. JS 中的跨域请求

    跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及 ...

  4. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  5. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  6. 浏览器跨域请求之credentials

    -时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...

  7. NodeJ node.js Jquery Ajax 跨域请求

    Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数 ...

  8. 使用nginx实现浏览器跨域请求

    跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用nginx反向代理来解决跨域问题. 啥是跨域? 假如你是百度开发人员, 在百度页面去请求 ...

  9. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

随机推荐

  1. 如何让tableViewCell的分割线从边框顶端开始

    在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作 -(voi ...

  2. 教你一招：Win10切换输入法与Win7一样（Ctrl + 空格）

    对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...

  3. 精通Web Analytics 2.0 （6） 第四章：点击流分析的奇妙世界：实际的解决方案

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第四章:点击流分析的奇妙世界:实际的解决方案 到开始实际工作的时候了.哦耶! 在本章中,您将了解到一些最重要的网络分析报告,我将 ...

  4. plsql配置

    1.安装客户的plsql,安装完成应该有PLSQL Developer和instantclient_11_2两个文件夹 2.打开plsql,取消登录直接进入主界面,通过 TOOLS->PREFE ...

  5. Java 正则表达式详解

    Java 提供了功能强大的正则表达式API,在java.util.regex 包下.本教程介绍如何使用正则表达式API. 正则表达式 一个正则表达式是一个用于文本搜索的文本模式.换句话说,在文本中搜索 ...

  6. 迅雷9、迅雷极速版之迅雷P2P加速：流量吸血鬼？为什么你装了迅雷之后电脑会感觉很卡很卡？

    原文地址:http://www.whosmall.com/post/90 关闭极速版迅雷ThunderPlatform.exe进程 ThunderPlatform.exe目的:利用P2P技术进行用户间 ...

  7. IO流 FileOutputSteam在fos.txt写出hello

    package cn.idcast2; import java.io.FileNotFoundException; import java.io.FileOutputStream; import ja ...

  8. 淘宝分布式NOSQL框架：Tair

    Tair 分布式K-V存储方案 tair 是淘宝的一个开源项目,它是一个分布式的key/value结构数据的解决方案. 作为一个分布式系统,Tair由一个中心控制节点(config server)和一 ...

  9. session生命周期(一)

    Session存储在服务器端,一般为了防止在服务器的内存中(为了高速存取),Session在用户访问第一次访问服务器时创建,需要注意只有访问JSP.Servlet等程序时才会创建Session,只访问 ...

  10. 跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...