MediaElement.js之浏览器跨域请求视频播放

Posted 苏州城外的微笑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的路径下,首页就可以调用

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

以上是关于MediaElement.js之浏览器跨域请求视频播放的主要内容,如果未能解决你的问题,请参考以下文章

mediaelement.js 与 Phonegap 兼容吗?

MediaElement.js 更改视频 onclick 的来源

Mediaelement.js - 想要删除所有控件 - 仅显示视频

mediaelement.js - 具有固定最大尺寸的响应式视频

MediaElement.js (WordPress) 为 YouTube 视频设置结束时间

MediaElement.js + Reveal JQuery modal:如何在 <a="close-reveal-modal">×</a> 上暂停视频/