For some reason I'm sure the folks at DivX think is important, there is no straightforward way to prevent their plugin from replacing all video elements on your page with they fancy logo.
What I need is a workaround for this, telling the plugin to skip some videos, i.e. not replace them with their playable content.
I got around this by putting an empty HTML 5 video tag, then putting in the video source tags in a JavaScript function in the body onload event. The video then comes up in the normal HTML 5 player and not the DivX web player.
e.g.
This would give the DivX player:
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>
But this would give the normal html 5 player:
<head>
<script type="text/javascript">
function changevid() {
document.getElementById('vid').innerHTML = '<source src="inc/videos/sample1.mp4" type="video/mp4" />';
document.getElementById('vid').load();
}
</script>
</head>
<body onload="changevid()">
<video id="vid" width="800" height="450" controls="controls">
</video>
</body>
At this time, there is no API or means to block the divx plugin from replacing video elements with their placeholder. :-(
i started reverse-engineering the divx-plugin to find out what can be done to hack a way into disabling it. An example, including the complete sourcecode of the divx-plugin, can be found here: http://jsfiddle.net/z4JPB/1/
It currently appears to me that a possible solution could work like this:
create a "clean" backup of the methods appendChild, replaceChild and insertBefore - this has to happen before the content-script from the chrome-extension is executed.
the content-script will execute, overrides the methods mentioned above and adds event-listeners to the DOMNodeInsertedIntoDocument and DOMNodeInserted events
after that, the event-listeners can be removed and the original DOM-Methods restored. You should now be able to replace the embed-elements created by the plugin with the video-elements
It seems, that the plugin is only replacing the video when there are src elements within the video tag. For me it worked by first adding the video tag, and then - in a second thread - add the src tags. However, this doesn´t work in IE but IE had no problem with an insertion of the complete video tag at once.
So following code worked for me in all browsers (of course, jQuery required):
var $container = $('video_container');
var video = 'my-movie';
var videoSrc = '<source src="video/'+video+'.mp4" type="video/mp4"></source>' +
'<source src="video/'+video+'.webm" type="video/webm"></source>' +
'<source src="video/'+video+'.ogv" type="video/ogg"></source>';
if(!$.browser.msie) {
$container.html('<video autoplay loop></video>');
// this timeout avoids divx player to be triggered
setTimeout(function() {
$container.find('video').html(videoSrc);
}, 50);
}
else {
// IE has no problem with divx player, so we add the src in the same thread
$container.html('<video autoplay loop>' + videoSrc + '</video>');
}
Related
I am creating a video scraper (for the Rumble website) and I am trying to get the src attribute of the video using HTMLUnit, this is because the element is added dynamically to the page (I am a beginner to these APIs):
val webClient = WebClient()
webClient.options.isThrowExceptionOnFailingStatusCode = false
webClient.options.isThrowExceptionOnScriptError = false
webClient.options.isJavaScriptEnabled = true
val myPage: HtmlPage? = webClient.getPage("https://rumble.com/v1m9oki-our-first-automatic-afk-farms-locals-minecraft-server-smp-ep3-live-stream.html")
Thread.sleep(10000)
val document: Document = Jsoup.parse(myPage!!.asXml())
println(document)
The issue is, the output for the <video> element is the following:
<video muted playsinline="" hidefocus="hidefocus" style="width:100% !important;height:100% !important;display:block" preload="metadata"></video>
Whereas -- if you navigate to the page itself and let the JS load -- it should be:
<video muted="" playsinline="" hidefocus="hidefocus" style="width:100% !important;height:100% !important;display:block" preload="metadata" poster="https://sp.rmbl.ws/s8/1/I/6/v/1/I6v1f.OvCc-small-Our-First-Automatic-AFK-Far.jpg" src="blob:https://rumble.com/91372f42-30cf-46b3-8850-805ee634e2e8"></video>
Some attributes are missing, which are crucial for my scraper to work. I need the src value so that ExoPlayer can play the video.
I am not totally sure, but I was wondering whether it had to do with the fact that the crossOrigin attribute is anonymous in the JavaScript:
<video muted playsinline hidefocus="hidefocus" style="width:100% !important;height:100% !important;display:block" preload="'+t+'"'+(a.vars.opts.cc?' crossorigin="anonymous"':"")+'>
I tried to play around with the different HTMLUnit options, as well as look online but I still haven't been able to extract the right attributes I need so that it can work.
How would I be able to bypass this and get the appropriate element values (src) that I need for the scraper using HTMLUnit? Is this even possible to do with HTMLUnit? I was also suspecting that maybe the site owners added this cross origin anonymous statement because it can bypass scrapers, though I am not sure.
How to reproduce my issue
Navigate to this link with a GUI browser.
Press 'Inspect Element' until you find the <video> HTML tag and observe that it contains an src attribute as you would expect to the mp4 file:
<video muted="" playsinline="" hidefocus="hidefocus" style="width:100% !important;height:100% !important;display:block" preload="metadata" src="https://sp.rmbl.ws/s8/2/I/6/v/1/I6v1f.caa.rec.mp4?u=3&b=0" poster="https://sp.rmbl.ws/s8/1/I/6/v/1/I6v1f.OvCc-small-Our-First-Automatic-AFK-Far.jpg"></video>
Now, let's simulate this with a headless browser, so add the following code to IntelliJ or any IDE (add a dependency to HTMLUnit and JSoup):
To gradle (Kotlin):
implementation(group = "net.sourceforge.htmlunit", name = "htmlunit", version = "2.64.0")
implementation("org.jsoup:jsoup:1.15.3")
To gradle (Groovy):
implementation group = 'net.sourceforge.htmlunit', name = 'htmlunit', version = '2.64.0'
implementation 'org.jsoup:jsoup:1.15.3'
Then in Main function:
val webClient = WebClient()
webClient.options.isThrowExceptionOnFailingStatusCode = false
webClient.options.isThrowExceptionOnScriptError = false
webClient.options.isJavaScriptEnabled = true
val myPage: HtmlPage? = webClient.getPage("https://rumble.com/v1m9oki-our-first-automatic-afk-farms-locals-minecraft-server-smp-ep3-live-stream.html")
Thread.sleep(10000)
val document: Document = Jsoup.parse(myPage!!.asXml())
println(".....................")
println(document.getElementsByTag("video").first())
If it throws an exception add this:
LogFactory.getFactory().setAttribute("org.apache.commons.logging.Log", "org.apache.commons.logging.impl.NoOpLog");
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("org.apache.commons.httpclient").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit.javascript.StrictErrorReporter").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit.javascript.host.ActiveXObject").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit.javascript.host.html.HTMLDocument").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit.html.HtmlScript").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware.htmlunit.javascript.host.WindowProxy").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("com.gargoylesoftware").setLevel(Level.OFF);
java.util.logging.Logger.getLogger("org.apache").setLevel(Level.OFF);
We are simply fetching the page with the headless browser and then using JSoup to parse the HTML output and finding the first video element.
Observe that the output does not contain any 'src' attribute as you saw in the GUI browser:
<video muted playsinline="" hidefocus="hidefocus" style="width:100% !important;height:100% !important;display:block" preload="metadata"></video>
Screenshot of how your output should look like in the console:
This is the major issue I am having, the src attribute of the <video> element is seemingly disappeared in the headless browser, and I am unsure why although I suspect it's related to some sort of mp4 codec issue.
Correct, the js support for the video element was not sufficient for this case.
Have done a bunch of fixes/improvements and the upcoming version 2.66.0 will be able to support this.
Btw: there is no need to parse the page a second time using jsoup - HtmlUnit has all the methods to deeply look inside the dom tree of the current page.
String url = "https://rumble.com/v1m9oki-our-first-automatic-afk-farms-locals-minecraft-server-smp-ep3-live-stream.html";
try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX)) {
webClient.getOptions().setThrowExceptionOnScriptError(false);
HtmlPage page = webClient.getPage(url);
webClient.waitForBackgroundJavaScript(10_000);
HtmlVideo video = (HtmlVideo) page.getElementsByTagName("video").get(0);
System.out.println(video.getSrc());
}
This code prints https://sp.rmbl.ws/s8/2/I/6/v/1/I6v1f.caa.rec.mp4?u=3&b=0 - the same as the source attribute in the browser.
But there are still two js errors reported when running this code. This is because some other js (i guess some tracking staff) provokes this errors. You can fix this by ignoring the js code for this two locations, this will make the code a bit faster also.
String url = "https://rumble.com/v1m9oki-our-first-automatic-afk-farms-locals-minecraft-server-smp-ep3-live-stream.html";
try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX)) {
webClient.getOptions().setThrowExceptionOnScriptError(false);
// ignore some js
new WebConnectionWrapper(webClient) {
public WebResponse getResponse(WebRequest request) throws IOException {
WebResponse response = super.getResponse(request);
if (request.getUrl().toExternalForm().contains("sovrn_standalone_beacon.js")
|| request.getUrl().toExternalForm().contains("r2.js")) {
WebResponseData data = new WebResponseData("".getBytes(response.getContentCharset()),
response.getStatusCode(), response.getStatusMessage(), response.getResponseHeaders());
response = new WebResponse(data, request, response.getLoadTime());
}
return response;
}
};
HtmlPage page = webClient.getPage(url);
webClient.waitForBackgroundJavaScript(10_000);
HtmlVideo video = (HtmlVideo) page.getElementsByTagName("video").get(0);
System.out.println(video.getSrc());
Thanks for this report - will inform on https://twitter.com/htmlunit about the new release.
So, I have tried for ages now it seems to track multiple Embedded videos on my test-site with Adobes SiteCatalyst.
Below is the link with documentation I've used
https://gist.github.com/KamalChembath/00106eb266c91777c32e
The problem I've tried to solve is that I want to be able to listen/track already embedded videos, and not actually create the videos using the API and THEN listen to them.
But the documentation "appends" an iframe created by the API into an empty div that needs to have the same id as the iframe id.
But since the embedded video is already there, I don't need this part, obviously.
Please feel free to ask questions if I'm not clear enough.
Anyone had this issue before?
Below is some changes I've made to try to make it append two players into two divs(trying to hack the code I've already got) Putting it all into a for-loop.
Regards everyone!
<div id="player123">
iframe id="player123" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/-yKNuU8biQo?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<div id="player1234">
<iframe id="player1234" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/VyK-JhjPguY?enablejsapi=1&origin=http://example.com"
frameborder="0"></iframe>
</div>
<script>
var iframeObject = document.getElementsByTagName('iframe');
for ( var i = 0; i < iframeObject.length; i++){
var youtube_id = iframeObject[i].id;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player(youtube_id, {
videoId: iframeObject[i].src.substring(29, 40),
events: {
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError
}
});
}
</script>
I'm using data-menu-top on this page because everything is fixed and uses Skrollr to animate the different sections into view. The reason everything is fixed is so that I could do full-page SVGs that cover the height of the page (if you think there's a better way to do this, I would love to be enlightened).
Here's a link to the project development page: http://pman.mindevo.com
The button that appears on the first section has data-menu-top="10300", and this works great on Chrome, but when I try to view it in Firefox (33.0) the link doesn't do anything at all.
I am initializing using this code:
<script type="text/javascript">
setTimeout(function() {
var s = skrollr.init({
});
skrollr.menu.init(s, {
easing: 'quadratic',
duration: function(currentTop, targetTop) {
return 1500;
}
});
}, 1000);
</script>
Am I properly using data-menu-top? Is this a bug I'm not aware of using fixed layouts that are hidden using height?
Do I need to change the layout somehow to accomplish what I want and have it work in Firefox?
So the problem with Firefox was the way that it handles <button> linking. Here's the way the button was in the HTML:
<button class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</button>
In Firefox it wasn't doing anything upon clicking, and got me thinking perhaps I'm using "button" HTML element incorrectly. Anyways, changing it to a div like so:
<div class="buy buypotato">
<a data-menu-top="10300" href="#potatoPurchase1" class="purchase-options first-popup-link">
<svg ....etc></svg>
</div>
That allowed Firefox to utilize Skrollr-menu to scroll to where I needed it to.
There might be a better way to do the layout on this, I'm still experimenting.
I want to use html5 video tag to play my video.
How can I set the time from which the video starts playing.
for example my video is 90 seconds long i want to start playing at 30 seconds
<video width="320" height="240" controls>
<source src="<?php echo base_url() ?>/programs/prg1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
please help me
From http://blog.grio.com/2012/08/how-to-seek-an-html5-video-at-a-specific-time-on-load.html
How To Seek an HTML5 Video at A Specific Time On Loadby Peter Tubig
HTML:
<video id="video1" width="320" height="240">
<source src="movie.mp4" type="video/mp4" />
</video>
Javascript:
document.getElementById("video1").currentTime = 10;
The Javascript statement sets the video1 video’s current time to the 10-second mark. However, this will only work if the browser has already loaded the video’s metadata. The metadata contains pertinent video information such as dimensions and duration. Knowing the video’s duration is required for the browser to seek the video. If it doesn’t have that, then current time will not be set (remains 0). A scenario where this could happen is when a webpage wants to play a video at a specific time when the page loads.
Html :
<video width="400" controls id="VideoId">
<source src="Intro.mp4" type="video/mp4">
</video>`
JavaScript:
var video = document.getElementsByTagName("video")[0];
video.currentTime = 40.066667;
you can also use get elementbyid
In html
<video id="player" width="320" height="240" src="video1.ogv" type="video/ogg" controls="controls">
</video>
and the java script:
<script language="javascript">
var video1 = "video1.ogv";
var video2 = "video2.ogv";
var player = document.getElementById("player");
player.setAttribute("ontimeupdate", "update();");
var time = 0.0;
var toUpdate = false;
function changeVideo() {
time = player.currentTime;
if (player.src.match(video1+"$") == video1)
player.src = video2;
else
player.src = video1;
player.load();
toUpdate = true;
player.play();
}
function update() {
if (flag) {
player.currentTime = time;
toUpdate = false;
}
}
</script>
I'm using this template :
http://getbootstrap.com/examples/offcanvas/
When i put my S3 video player, in big size, it's ok like here :
(source: free.fr)
But if i reduce the size of my page, i've got this:
(source: free.fr)
My line code is :
<div class="jumbotron">
<p><strong>Module 1 :</strong> <a name="un">Introduction</a></p>
<script type="text/javascript">
<!-- Script for video S3 -->
</script>
<p>Description</p>
</div>
How can i keep the width of the div that contain my video with Bootstrap?
Could you also add an example of the javascript you use? You will have to try to set the width of your embedded code to 100%.
I tried some example code from: http://www.icanlocalize.com/site/2010/03/using-amazon-s3-to-host-streaming-videos/:
<script src="http://www.onthegosystems.com/mediaplayer/swfobject.js" type="text/javascript"></script>
<div id="mediaspace">This text will be replaced</div>
<script type="text/javascript">// <![CDATA[
var so = new SWFObject('http://www.onthegosystems.com/mediaplayer/player.swf','mpl','640','467','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('wmode','opaque');
so.addVariable('file','http://d1ftqtsbckf6jv.cloudfront.net/using_glossaries.mp4');
so.write('mediaspace');
// ]]></script>
Al thought the width is hardcoded here, you could also manipulate it with javascript:
$('#mediaspace embed').attr('width','100%');
Also read this part of the docs: http://getbootstrap.com/getting-started/#third-parties. The docs have a Google maps example now but this issue will be happen for all kind of third party content.
For TB2 i used this: How to implement a responsive Youtube embed iframe with Twitter Bootstrap? should work for TB3 too.