跨域请求测试代码-图片视频自动播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CORS跨域测试</title> <!--1.引用js脚本和css样式表 并放置在<head> 标签中。--> <!--<link rel="stylesheet" href="static/mediaelementplayer.css" />--> <!--<script src="static/mediaelement-and-player.min.js"></script>--> </head> <body> <div><input type="text" id="cors_url" placeholder="请输入测试url"> <input type="text" id="methodid" placeholder="请求方法：get/post/delete/put/head"> <input type="submit" value="点此测试跨域" onclick="testcors('cors_url','result1')"> <span id="result1" style="font-weight: 800 ;font-size: 25px" >【图片/视频 跨域请求成功将自动播放】</span> </div> <div> <img id="img1" ><span id="span1"></span> </div> <video id="video1" width="320" height="240" ></video> <!-- controls="controls" --> <!--flash回退--> <!--为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用--> <!--<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">--> <!--<!– MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 –>--> <!--<source type="video/mp4" src="myvideo.mp4" />--> <!--<!– WebM/VP8 for Firefox4, Opera, and Chrome –>--> <!--<source type="video/webm" src="myvideo.webm" />--> <!--<!– Ogg/Vorbis for older Firefox and Opera versions –>--> <!--<source type="video/ogg" src="myvideo.ogv" />--> <!--<!– Optional: Add subtitles for each language –>--> <!--<track kind="subtitles" src="subtitles.srt" srclang="en" />--> <!--<!– Optional: Add chapters –>--> <!--<track kind="chapters" src="chapters.srt" srclang="en" />--> <!--<!– Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript –>--> <!--<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">--> <!--<param name="movie" value="flashmediaelement.swf" />--> <!--<param name="flashvars" value="controls=true&file=myvideo.mp4" />--> <!--<!– Image as a last resort –>--> <!--<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />--> <!--</object>--> <!--</video>--> </body> <script> //判断各种浏览器兼容,用不同方法open 测试url function createCORS(method, url){ var xhr = new XMLHttpRequest(); if('withCredentials' in xhr){ console.log('xhr = new XMLHttpRequest()'); xhr.open(method, url, true); }else if(typeof XDomainRequest != 'undefined'){ console.log('xhr = new XDomainRequest()'); var xhr = new XDomainRequest(); xhr.open(method, url); }else{ xhr = null; } return xhr; } //点击按钮再进行浏览器跨域动作测试 function testcors(corsurlid,resultid) { var test_url = document.getElementById(corsurlid).value; var request_method = document.getElementById('methodid').value; console.log('测试url：',test_url); console.log('测试方法：',request_method); //请求开始 var request = createCORS(request_method, test_url); if(request){ request.responseType = "blob"; request.onload = function(){ var result1 = document.getElementById(resultid); var Content_Type = request.getResponseHeader('Content-Type'); console.log(" 请求动作被允许 Response Content-Type:", Content_Type ,"视频自动播放,图片自动展示"); var blob = this.response; result1.setAttribute('style',"color: green;font-weight: 800 ;font-size: 25px"); if (Content_Type.indexOf('video') != -1 ){ //视频播放 var video1 = document.getElementById('video1'); video1.setAttribute( 'controls',"controls"); video1.src = window.URL.createObjectURL(blob); video1.play(); result1.innerHTML = '跨域请求动作OK! Response Content-Type:' + Content_Type + " 这是视频哎！！！播放一把!"; }else if (Content_Type.indexOf('image') != -1 ){ //图片播放 var img = document.getElementById('img1'); img.src = window.URL.createObjectURL(blob); result1.innerHTML = '跨域请求动作OK! Response Content-Type:' + Content_Type + " 这是图片哎！！！让我看看!"; } }; request.onabort = function(){ console.log('跨域请求失败'); result1.setAttribute('style',"color: red; font-size:30"); result1.innerHTML = "跨域请求失败!!!"; }; //跨域失败动作 request.send(); //发送请求 }else { result1.setAttribute('style',"color: red; font-size:30"); result1.innerHTML = "该浏览器不支持跨域!!!"; console.log('该浏览器不支持跨域') } } </script> </html>
2020 02 27更新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CORS跨域测试</title> <!--1.引用js脚本和css样式表 并放置在<head> 标签中。--> <!--<link rel="stylesheet" href="static/mediaelementplayer.css" />--> <!--<script src="static/mediaelement-and-player.min.js"></script>--> </head> <body> <div><input type="text" id="cors_url" placeholder="请输入测试url"> <input type="text" id="methodid" placeholder="请求方法：get/post/delete/put/head"> <input type="text" id="resType" placeholder="responseType：text/blob(图片/视频填写)"> <input type="submit" value="点此测试跨域" onclick="testcors('cors_url','result1')"> <span id="result1" style="font-weight: 800 ;font-size: 25px" >【图片/视频 跨域请求成功将自动播放】</span> </div> <div> <img id="img1" ><span id="span1"></span> <a id="json1"></a> </div> <video id="video1" width="320" height="240" ></video> <!-- controls="controls" --> <!--flash回退--> <!--为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用--> <!--<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">--> <!--<!– MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 –>--> <!--<source type="video/mp4" src="myvideo.mp4" />--> <!--<!– WebM/VP8 for Firefox4, Opera, and Chrome –>--> <!--<source type="video/webm" src="myvideo.webm" />--> <!--<!– Ogg/Vorbis for older Firefox and Opera versions –>--> <!--<source type="video/ogg" src="myvideo.ogv" />--> <!--<!– Optional: Add subtitles for each language –>--> <!--<track kind="subtitles" src="subtitles.srt" srclang="en" />--> <!--<!– Optional: Add chapters –>--> <!--<track kind="chapters" src="chapters.srt" srclang="en" />--> <!--<!– Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript –>--> <!--<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">--> <!--<param name="movie" value="flashmediaelement.swf" />--> <!--<param name="flashvars" value="controls=true&file=myvideo.mp4" />--> <!--<!– Image as a last resort –>--> <!--<img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />--> <!--</object>--> <!--</video>--> </body> <script> //判断各种浏览器兼容,用不同方法open 测试url function createCORS(method, url){ var xhr = new XMLHttpRequest(); if('withCredentials' in xhr){ console.log('xhr = new XMLHttpRequest()'); xhr.open(method, url, true); }else if(typeof XDomainRequest != 'undefined'){ console.log('xhr = new XDomainRequest()'); var xhr = new XDomainRequest(); xhr.open(method, url); }else{ xhr = null; } return xhr; } //点击按钮再进行浏览器跨域动作测试 function testcors(corsurlid,resultid) { var test_url = document.getElementById(corsurlid).value; var request_method = document.getElementById('methodid').value; console.log('测试url：',test_url); console.log('测试方法：',request_method); //请求开始 var request = createCORS(request_method, test_url); if(request){ var restype = document.getElementById('resType').value; request.responseType = restype; request.onreadystatechage = function(){ var Content_Type = request.getResponseHeader('Content-Type'); console.log("请求状态发生改变 Response Content-Type:", Content_Type) }; request.onload = function(){ var result1 = document.getElementById(resultid); var Content_Type = request.getResponseHeader('Content-Type'); console.log(" 请求动作被允许 Response Content-Type:", Content_Type ,"视频自动播放,图片自动展示"); var blob = this.response; result1.setAttribute('style',"color: green;font-weight: 800 ;font-size: 25px"); if (Content_Type.indexOf('video') != -1 ){ //视频播放 var video1 = document.getElementById('video1'); video1.setAttribute( 'controls',"controls"); video1.src = window.URL.createObjectURL(blob); video1.play(); result1.innerHTML = '跨域请求动作OK! Response Content-Type:' + Content_Type + " 这是视频哎！！！播放一把!"; }else if (Content_Type.indexOf('image') != -1 ){ //图片播放 var img = document.getElementById('img1'); img.src = window.URL.createObjectURL(blob); result1.innerHTML = '跨域请求动作OK! Response Content-Type:' + Content_Type + " 这是图片哎！！！让我看看!"; } else if (Content_Type.indexOf('application/json') != -1 ){ //图片播放 var json1 = document.getElementById('json1'); json1.innerText =request.responseText; result1.innerHTML = '跨域请求动作OK! Response Content-Type:' + Content_Type + " 这是文字哎！！！让我看看!"; } }; request.onabort = function(){ console.log('跨域请求失败'); result1.setAttribute('style',"color: red; font-size:30"); result1.innerHTML = "跨域请求失败!!!"; }; //跨域失败动作 request.send(); //发送请求 }else { result1.setAttribute('style',"color: red; font-size:30"); result1.innerHTML = "该浏览器不支持跨域!!!"; console.log('该浏览器不支持跨域') } } </script> </html>
posted on 2020-02-14 23:06 zhangmingda 阅读(591) 评论(0) 编辑 收藏 举报
