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> 上暂停视频/