Home > Developer > Web Develop
Browser cross-domain issues have long been a common problem for front-end developers, so today we learned how to make browsers request resources across domains
Knowledge you need to know
-Domain (primary domain, subdomain, what is cross-domain) simply because of the browser homology policy, the Protocol (HTTP,HTTPS), domain name (baidu.com,sina.com), Port (80,81) that sends the request URL. any one of the three is different from the current page address is a cross-domain explanation: http://www.cnblogs.com/dojo-lzz/p/4265637.html
-JSONP (recommended here http://kb.cnblogs.com/page/139725/article, do not know the words can go to see, explain very detailed)
-Understand MediaElement.js's API (http://www.mediaelementjs.com/#api https://github.com/johndyer/mediaelement because it's all in English, May not want to see, but recommended every line is carefully translated see )
Because I want to cross the domain, I built IIS and NODEJS servers locally, and implemented cross-domain through different ports
Go directly to the code.
The first is the video display page
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>video</title>
<link rel= "stylesheet" type= "Text/css" href= "Mediaelement-master/mediaelementplayer.css" >
<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= "+" height= "controls=" "Controls" poster= "1.jpg" ></video>
<ul style= "margin-top:600px; Position:absolute; " >
<li id= "Video-1" data-vid= "1" class= "Playitem cc" >
</li>
<li id= "Video-2" data-vid= "2" class= "Playitem cc" >
</li>
<li id= "video-3" data-vid= "3" class= "Playitem cc" >
</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>
Here are three files called MediaElement.js:mediaelementplayer.css style jquery-1.12.2.js and Mediaelement-and-player.min.js
Jsonp references to jsonp.js files
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"
});
It's good to be here, now just put the video in the Jsonp path, the first page can be called
Because it is a beginner, if there is a mistake, please correct me.
MediaElement.js Browser cross-domain request video playback
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
