I want to download a video available here. Like the top right corner indicates, it might be hosted on Crunchyroll so let's inspect the page source.
This is the html code snippet of interest:
<div id="zype_5387dd4269702d063f000000" style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;">
<div style="position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden;">
<iframe frameborder="0" width="100%" height="100%" id="_video_5387dd4269702d063f000000" src="https://www.crunchyroll.com/affiliate_iframeplayer?aff=af-88206-hkyj&media_id=663121&video_format=0&video_quality=0&auto_play=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" nuan_newframe="true"></iframe>
</div>
</div>
Inspection reveals that the video is embedded in an iframe and indeed is hosted on Crunchyroll. It is also important to note that the src attribute is the link going directly to the video player page.
On the player page the HTML looks as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="icon" href="/favicon.png" />
<title></title>
<script type="text/javascript" src="https://www.crunchyroll.com/common/static/js/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.crunchyroll.com/css//20150727144515.1ae5987b9d8aa2552cc16fb8eadc8e78/crcommon/reset.css"/>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000;
color: #FFF;
}
#content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<!--[if IE]>
<style type="text/css">
.clearfix { zoom: 1; /* triggers hasLayout */ display: block; /* resets display for IE/Win */}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
<![endif]-->
</head>
<body>
<div id="content"><div id="the_embedded_player" style="display:block;" ><div style="color:red; text-align:center; margin:16px 0px;">You either have Javascript turned off or an old version of Flash Player.<br/><br/> Get the latest Flash Player</div></div><script type="text/javascript"><!--
swfobject.embedSWF("https:\/\/www.crunchyroll.com\/flash\/20150615120132.eb0aab8f716ea6981edb6397bd93ffc3\/StandardVideoPlayer.swf",'the_embedded_player','100%', '100%', '9.0.115','https://www.crunchyroll.com/common/static/flash/express_install.swf',{"config_url":"http%3A%2F%2Fwww.crunchyroll.com%2Fxml%2F%3Freq%3DRpcApiVideoPlayer_GetStandardConfig%26media_id%3D663121%26video_format%3D0%26video_quality%3D0%26auto_play%3D0%26aff%3Daf-88206-hkyj%26show_pop_out_controls%3D0%26enable_next%3D0%26lang%3DdeDE"},{"wmode":"transparent","allowFullScreen":"true","allowscriptaccess":"always","allownetworking":"all"},{"id":"the_embedded_player","style":"display:block;"},null);
//--></script></div>
<!-- pylon16 : c64387480c -->
</body>
</html>
It becomes clear that the video must be a swf flash video file. embedSWF is called which is defined here and looks like this (after beautifying):
embedSWF: function(ab, ah, ae, ag, Y, aa, Z, ad, af, ac) {
var X = {
success: false,
id: ah
};
if (M.w3 && !(M.wk && M.wk < 312) && ab && ah && ae && ag && Y) {
w(ah, false);
K(function() {
ae += "";
ag += "";
var aj = {};
if (af && typeof af === r) {
for (var al in af) {
aj[al] = af[al]
}
}
aj.data = ab;
aj.width = ae;
aj.height = ag;
var am = {};
if (ad && typeof ad === r) {
for (var ak in ad) {
am[ak] = ad[ak]
}
}
if (Z && typeof Z === r) {
for (var ai in Z) {
if (typeof am.flashvars != D) {
am.flashvars += "&" + ai + "=" + Z[ai]
} else {
am.flashvars = ai + "=" + Z[ai]
}
}
}
if (F(Y)) {
var an = u(aj, am, ah);
if (aj.id == ah) {
w(ah, true)
}
X.success = true;
X.ref = an
} else {
if (aa && A()) {
aj.data = aa;
P(aj, am, ah, ac);
return
} else {
w(ah, true)
}
}
if (ac) {
ac(X)
}
})
} else {
if (ac) {
ac(X)
}
}
}
This obfuscated code doesn't look like it's going to lead anywhere.
Copying and pasting each of the links found in the html into the browser doesn't seem to allow downloading the video (idea taken from here). How do I get the correct url?
Note:
The programming code for downloading the video file is not the main focus here, but I would use this for html parsing and this for download the file.
Related
The below code ALMOST works and I think I'm close yet quite far away from getting it to work properly. The problem is, the way the handlePinch function is set up. What actually happens when the user pinches to zoom a bit, is the square starts to accelerate. The more the user pinches, the faster the square zooms.
How can this be implemented that each time the user pinches to zoom, it incrementally scales, i.e. picking up where it left off without exceeding the max scale?
I'm stuck on this for two days and there doesn't seem to be any formula to show how something like this works. Note, I know there are libraries for this, I want to know how this works with vanilla js
const box = document.querySelector('.box')
function updateCss(scale) {
box.style.transform = `scale(${scale})`
}
let lastScale
let currentScale
let isAlreadyScaled = false
const minScale = 1
const maxScale = 1.8
function handlePinch(e) {
e.preventDefault()
const isZooming = e.scale > 1
if (isZooming) {
if (!isAlreadyScaled) {
lastScale = Math.min(minScale * e.scale, maxScale)
isAlreadyScaled = true
} else {
lastScale = Math.min(minScale * (lastScale * e.scale), maxScale)
}
}
updateCss(lastScale)
}
box.addEventListener('touchstart', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
box.addEventListener('touchmove', e => {
if (e.touches.length === 2) {
handlePinch(e)
}
})
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.wrapper {
height: 400px;
width: 100%;
top: 0;
left: 0;
position: relative;
margin: 24px;
}
.scale-container {
height: 100%;
width: 100%;
position: absolute;
background: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 200px;
width: 200px;
background: pink;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="wrapper">
<div class="scale-container">
<div class="box"></div>
</div>
</div>
</body>
</html>
I am using blockly to create my program. I have blockly downloaded from this github location, and I'm trying to replace blockly images path from this location: https://blockly-demo.appspot.com/static/media/sprites.png to this (relative) location: sprites.png. but I don't know how to do this.
Question is: Where I can set this path?
Here is my page code (in root folder of blockly):
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="UTF-8">
<title>Blockly Test</title>
<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="msg/js/en.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0;">
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
// toolbox codes are here.
</xml>
<div id="blocklyArea" style="position: absolute; width: 100%; height: 100%;"></div>
<div id="blocklyDiv" style="position: absolute;"></div>
<script>
var blocklyArea = document.getElementById('blocklyArea');
var blocklyDiv = document.getElementById('blocklyDiv');
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox")});
var onresize = function(e) {
// Compute the absolute coordinates and dimensions of blocklyArea.
var element = blocklyArea;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
// Position blocklyDiv over blocklyArea.
blocklyDiv.style.left = x + 'px';
blocklyDiv.style.top = y + 'px';
blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();
Blockly.svgResize(workspace);
//document.body.innerHTML = document.body.innerHTML.replace(/https:\/\/blockly\-demo\.appspot\.com\/static\/media\/sprites\.png/gi, "sprites.png");
</script>
<button id="generator" onclick="try { eval(Blockly.JavaScript.workspaceToCode(workspace)); } catch (e) { alert(e); }" style="position: absolute; margin: 25px; right: 0; width: 80px; height: 80px; border-radius: 50%; border: 5px solid teal; background: darkcyan; color: white; font-size: x-large; outline: none; cursor: pointer;">⯈</button>
</body>
</html>
Sorry for bad english.
You can change the media path while injecting blockly. Refer to media option while doing Blockly.inject() call.
In your case you can do something like -
var workspace = Blockly.inject(blocklyDiv, {toolbox: document.getElementById("toolbox"), media: './'});
i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>
We have this really annoying project were we need to make a game in JQuery. I'm having some problems making my character move the way I want him to. I manage to make the character move but he does not move in %. He adds his own width to the "left:" of him and then animates to that position. This is not good, because when you resize the window they do not "scale with it". Basically, can anyone help me make the player move smoothly in % values! Here is my code! (Variables and comments are in Swedish...)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
index.html:
<!doctype html>
<html>
<head>
<title>JQuery spel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/stil.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/start.js"></script>
<script type="text/javascript" src="script/spelareRörelse.js"></script>
</head>
<body onresize="sättSpelareHöjd()">
<header><h1>Jquery spel</h1></header>
<br>
<div id="bana"></div>
</body>
stil.css:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Ubuntu', sans-serif;
}
#bana {
position: relative;
border: 1px solid black;
margin: auto;
width: 99%;
height: 70vh;
}
#spelare1 {
background-color: green;
width: 2.7%;
height: 0;
display: block;
position: absolute;
}
start.js:
$(document).ready(function(){
//var tid = parseInt(prompt("Hur långt ska du spela? (Ange i sekunder)"));
$("#bana").append("<div id='spelare1'></div>");
$("#bana").append("<div id='spelare2'></div>");
sättSpelareHöjd();
});
var knappTryckt1 = true;
function sättSpelareHöjd() {
var spelareHöjd = $("#spelare1").width();
$("#spelare1").css("height", spelareHöjd);
}
spelareRörelse.js (playerMovment.js):
//Spelare 1 rörelse
$(document).keydown(function(e){
if(knappTryckt1) {
if(e.keyCode == 37) {
$("#spelare1").stop().animate({left: "-=" + $(this).width()},5000);
//Pil vänster
}
else if (e.keyCode == 38) {
$("#spelare1").stop().animate({top: "-=" + $(this).height()},5000);
//Pil upp
}
else if (e.keyCode == 39) {
$("#spelare1").stop().animate({left: "+=" + $(this).width()},5000);
//Pil höger
}
else if (e.keyCode == 40) {
$("#spelare1").stop().animate({top: "+=" + $(this).height()},5000);
//Pil ner
}
knappTryckt1 = false;
}
});
$(document).keyup(function(){
$("#spelare1").stop();
knappTryckt1 = true;
});
If you can help! Thanks! :)
JSfiddle : https://jsfiddle.net/Leqca77h/1/
A solution was found! Changing:
"left: "-=" + $(this).width()"
to:
"left: "-=" + 100 + "%""
worked for me!
I am trying to implement a drag and drop image upload similar functionality to imgur.com.
You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.
My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.
You can see the problem in action here: JS Fiddle, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>
Javascript code:
$(document).on('dragover', function () {
$('#upload-global-drop-overlay').css({'display': 'block'});
});
$('#upload-global-drop-overlay').on('dragleave', function () {
$('#upload-global-drop-overlay').css({'display': 'none'});
});
$(document).on('drop', function (e) {
$('#upload-global-drop-overlay').css({'display': 'none'});
e.preventDefault();
});
Hey hopefully you found an answer to this, if not here is a little example that looks like imgur in my oppinion, using your code.
jsFiddle: http://jsfiddle.net/JUBwS/74/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}
Javascript:
var isDragging = null;
$(document).on('dragover', function () {
if(isDragging==null)
doDrag();
isDragging = true;
});
$(document).on('drop', function (e) {
e.preventDefault();
isDragging = false;
});
$(document).on('dragleave', function (e) {
isDragging = false;
});
var timerId=0;
function doDrag()
{
timerId = setInterval(function()
{
if(isDragging)
$('#upload-global-drop-overlay').fadeIn(500);
else
{
$('#upload-global-drop-overlay').fadeOut(500);
isDragging = null;
clearInterval(timerId);
}
},200);
}
This sample uses timers, but it is active only when something is being dragged into the form. I am certainly going to use this in the future.
I actually found another solution, I think it's a bit simpler because it doesn't use setInterval. And I've implemented the actual drag and drop functionality for anyone interested.
The whole working example with drag and drop functionality is available below.
jsFiddle - Demo: http://jsfiddle.net/6SV9P/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1</div>
<div id="image"></div>
</body>
</html>
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}
JS:
var dragDropFromDesktop = (function ($) {
$(document).on('dragenter', function () {
$('#upload-global-drop-overlay').fadeIn(200)
});
$('#upload-global-drop-overlay').on('dragleave', function (e) {
if (e.originalEvent.pageX < 10 || e.originalEvent.pageY < 10 || $(window).width() - e.originalEvent.pageX < 10 || $(window).height - e.originalEvent.pageY < 10) {
$("#upload-global-drop-overlay").fadeOut(200);
}
});
$('#upload-global-drop-overlay').on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
// Handle dropped image file - only Firefox and Google Chrome
$('#upload-global-drop-overlay').on('drop', function (e) {
$('#upload-global-drop-overlay').fadeOut(200);
var files = e.originalEvent.dataTransfer.files;
if (files === undefined) {
alert('Your browser does not support file Drag and Drop!')
} else {
var file = files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader = new FileReader();
reader.onload = function (evt) {
var img = new Image();
img.src = evt.target.result;
$('#image').html('<img src="' + img.src + '">');
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
e.stopPropagation();
});
})(jQuery);