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

需要了解的知识

-域(主域,子域,什么是跨域)  简单来说由于浏览器同源策略,凡是发送请求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. 订餐系统之微信支付,踩了官方demo的坑

        最近一个项目要增加微信支付的功能,想来这个东西出来这么久了,按微信提供的应该可以很快搞定的,结果提供的demo( JS API网页支付)中各种坑,咨询他们的客服,态度倒是非常好,就是解决不了问 ...

  2. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  3. javascript 中断函数的使用 setInterval()——返回顶部

    方法名称:gotop() 功能描述:点击某个元素,调用方法gotop(),固定间隔,滚动至屏幕顶部 日期 :2016.06.06 16:02 author  :cyh2009@live.com < ...

  4. Local gulp not found in.. on windows

    当出现报错时,请按如下方式安装 gulp 以下使用国内的淘宝镜像安装: $ # Step 1 $ cnpm install -g gulp $ # Step 2 $ cnpm install --sa ...

  5. Flyme适配源码更新命令,轻松完成打包

    第一次已经同步了所有源码(花了很长时间),第一次已经连接手机进行了插桩和解reject,那么第二次还需要这么麻烦吗?答案是:NO ! 1.官方源码,执行如下命令可以实现: repo sync -c 2 ...

  6. iOS10遇到有推送的Demo真机报错的解决

    1.打开project.pbxproj,搜com.apple.Push 改成enabled = 0(在projectName.xcodeproj文件上右键"显示包内容",用文本编辑 ...

  7. CocoaPods第三方库管理 iOS

    越来越多的SVN管理,越来越多的工程文件,我不能总是那么一个一个的把第三方库拖进去,我厌倦了拖拽和配置,我找到了替代方法--CocoaPods 补充一下:最近在给新机子安装时 发现 sudo gem ...

  8. Traditional Language Model

    Traditional Language Model通常用于回答下述问题: How likely is a string of English words good English ? \(p_{LM ...

  9. 【Beta】第四次任务发布

    PM 日常管理&dev版宣传(周日开始). 后端 #99 服务发布 验收条件:使dev版能在www.buaaphylab.com下运行. 前端 #87 登录后能够查看与下载用户收藏的报告.生成 ...

  10. BZOJ4285: 使者

    搞出dfs序,转化为查询矩形点数,树套树搞定. #include<cstdio> #include<cstdlib> #define N 100005 #define IF e ...