I would like to crawl a web page and extracts a video url embedded in the page. I first used Inspect tool and could easily see the embedded link as shown in the picture below:
And the target <video> tag:
<video class="jw-video jw-reset" tabindex="-1" disableremoteplayback="" webkit-playsinline="" playsinline="" preload="metadata" src="https://lh3.googleusercontent.com/YYxKbKt3Apa8A2LkHKBJ7Fx6GU_iCIjEeGyyPJm_Ll-9hO4K8fDZV1pAbYprwpRhS5yFanf7=m18?title=[CayPhim.Net]-Bay-Vien-Ngoc-Rong-Sieu-Cap-tap-6.[360p]"></video>
I then tried to View Page Source tool and searched for the link but I couldn't find it. Instead, I found some javascript code that seems to be used to get and add the link to the page dynamically (at page loading time):
<div id="switchserver" style="height:100%;">
<div id="phim_html5" style="height:100%;">
<div class="loading"></div>
</div>
<script>$(document).ready(function () {
$.ajax({
url: "http://player.cayphim.net/jwplayer7/index_googima.php",
type: "GET",
cache: false,
data: {
"url": "8ce46ffa35805780571877c8ae5808f6a5e8898ebf9d294326735716694ccb4279505da51df9678cc8601a390a422d5e639449ec90332ee518e06f1dd579606d106f292d49bb38d9b2e80d0ee965a5c0e2911922e48ac972c521c4236512d356681404472b2cb39d9fff915bb4da21c8315d3fd6fc6cb0d2ed27183598661d40",
"name": "QmF5IFZpZW4gTmdvYyBSb25nIFNpZXUgQ2FwIHRhcCA2",
"sub": ""
},
success: function (msg) {
$("#phim_html5").html(msg);
}, error: function () {
$("#phim_html5").html("<div class='player-error'>Server quá tải. Vui lòng chọn server khác bên dưới...</div>");
},
});
});
</script>
<img style="display: none" src="http://image.cayphim.net/1553256337-lSC0nSX6Wj9dlOXfK29gK2iwoKF9D0p4YwnxYgmyCwmyBfJ29eW1wKpPetD3BkBKF9D0p4MsZPPjEReTD0UVY0K4YvoGKF9D0p42wODHaQKFo5pGMVmG9XmN05lP80DksxCQaHXKF9D0p4MMJwwhnyohFxsEYKF9D0p4wRJH5xYk1eXEr9mETjpng" />
</div>
Now I used Advanced REST Client to make a GET request to http://player.cayphim.net/jwplayer7/index_googima.php with parameters as specified in the javascript code but I got response containing some thing like this:
<div id="playerjw7">Trình duyệt của bạn không hỗ trợ xem phim bằng Player HTML5. Vui lòng cài đặt Chrome hoặc Firefox</div>
Yeah, it's Vietnamese, but it means "Your browser doesn't support Video Player HTML5. Please install Chrome or Firefox".
How could I programmatically scrape and extract the embedded video url?
Related
Hy,
Is there a way to make hover on item image, but when is hover plays video?
Something like this but not in popup:
Demo
Thanks in advance
This is not possible out of the box.
I'm sure this is a paid extension for this but if you would like to code it the good old fashioned way you can use jQuery and HTML5 video player to achieve this.
<video id="video" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<a id="thumbnail">Im the thumbnail</a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery('#video').show();
jQuery('#video').play();
}, function() {
jQuery('#video').hide();
jQuery('#video').pause();
});
});
</script>
What I suggest is linking the video and thumbnail either via a data-attribute:
e.g
<a id="thumbnail" data-video="#video"></a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery(jQuery(this).data('video')).show();
jQuery(jQuery(this).data('video')).play();
}, function() {
jQuery(jQuery(this).data('video')).hide();
jQuery(jQuery(this).data('video')).pause();
});
});
</script>
on the thumbnail or making it relative to a parent container for multiple videos.
can one help on how can i submit the form to search page script on index page and return the results of search script on specific DIV id search_results we out going to the search.php or refresh the index page using AJAX onClick
Am not good in Ajax but i try my best to come out with the following code which does what am looking for but is loading the page we out clicking anything i need a user to trigger the event when he/she enters what they are looking for? Any answer or suggestion is greatly appreciate
<script language="javascript" src="js/jquery-8.js"></script>
<script language="javascript">
var grbData = $.ajax({
type : "GET",
url : "search_m.php",
data : "q=",
success: function (html) {
$("#more-info").html(html);
}
});
</script>
<div id="more-info"></div>
I wish the above code to use this following htm form
<form method="get" style="width:230px; margin:0 auto;" id="find">
<input type="image" src="images/searchthis.png" id="search_btn">
<input type="text" id="search_toggle" name="q" placeHolder="type to start searching">
</form>
Add a click event to the search_btn element.
$('#search_btn').click(function(e) {
e.preventDefault();
$.ajax({
type : "GET",
url : "search_m.php",
data : $('#search_toggle').val(),
success: function (html) {
$("#more-info").html(html);
}
});
HTH.
I have a form inserted by jQuery Ajax to a page's div (say, 'content') and when the user finishes filling the form and hits 'submit' button, the result will be shown for further verification. The html and ajax code are as follows:
HTML:
<form id="userForm" action="..." method="post">
...
...
</form>
Ajax:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#content').html(returnData);
}
});
});
The 'returnData' is the filled form (without input fields) for further confirmation. Now, how do I implement a 'back' button such that the user may go back and modify the previously entered data?
I am working on Google App Engine with Python. Thanks.
I wouldn't replace the form with new HTML.
I would rather hide the form with display: none and add the new HTML for viewing alongside. If you want to go back, then you can just hide the "viewing div" and show again the form, without the need to refill any input elements.
Something along these lines should work
HTML:
<div id="content">
<div id="user-form-container">
<form id="userForm" ...>...</form>
</div>
<div id="viewing-container"></div>
</div>
CSS:
#viewing-container {
display: none;
}
The viewing part contains some sort of back-button, which hides the viewing area and shows the form again
jQ:
$(document).ready(function() {
$('#userForm').ajaxForm({
success: function(returnData) {
$('#viewing-container').html(returnData);
$('#user-form-container').hide();
$('#viewing-container').show();
$('#viewing-container #back-button').click(function() {
$('#user-form-container').show();
$('#viewing-container').hide();
});
}
});
});
(Re-edited, Nov 23, 2012, because some of the problems are due to my personal errors. Sorry.)
I am developing a web system on Google App Engine. I have a page base.html which contains links, each of which when clicked would update content1 div via Ajax. content1 is supplied by admin.html which contains buttons and content2 div. The buttons when clicked would update content2 via Ajax, too. content2 is supplied by manage.hmtl in which there are many forms to collect data one by one.
Here are my problems:
(1) The two clicks on the link in base.html and later on the button in admin.html, respectively, works just fine -- content1 shows the buttons and content2 shows the forms. However, there is no content2 div in manage.html, how would Ajax update content2 in admin.html? Currently, when I post one of the form data, content1 went blank. I would like it to still show the forms because there are other data to enter.
(2) There are more than 20 links and buttons in the page. Do I have to write 20 Ajax functions for them? Is there a way to write just one (or two) function instead and share by the links and buttons.
Thanks in advance for you help. Descriptions of the program and fragments of scripts are listed as follows:
main.py renders base.html (includes content1 div)
URL /admin: class Admin(webapp2.RequestHandler) adds the content of admin.html (includes buttons and content2 div) to content1 via Ajax
URL /admin?arg1=manage: class Manage(webapp2.RequestHandler) adds the content of manage.html (includes several forms) to content2 via Ajax
Problem: After submitting one of the forms in content2 (i.e., manage.html), the page went blank.
base.html:
<html>
...
<div id="content1"></div>
...
Admin
...
<script>
function admin() {
$.ajax({
type: "get",
url: "/admin",
cache: false,
success: function(returndata){
$("#content1").html(returndata);
}
});
}
</script>
...
</html>
'admin.html' (no html header)
...
<a href="javascript:void(0);" onclick="return manage()">
<img src="/static/images/main-manage.png" class="adminButton" /></a>
...
<div id="content2"></div>
...
<script>
function manage() {
$.ajax({
type: "get",
url: "/admin?arg1=manage",
cache: false,
success: function(returndata){
$("#content2").html(returndata);
}
});
}
</script>
'manage.html' (no html header)
<form action="" method="">
...
<input type="file" name="image">
<input type="button" onclick="return addImage()">
</form>
...
<form ...>
...
</form>
<script>
function addImage() {
var image = $('input[name=image]').val();
$.ajax({
type: "post",
url: "/admin?arg1=manage&arg2=image",
data: {'image': image},
cache: false,
success: function(returndata){
$("#content2").html(returndata);
}
});
}
</script>
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link