I have been working on a mediaplayer with playlist using flowplayer in combination with jQuery tabs. But I run into issues with IE where when I switch tabs it still keeps playing the video in the closed tab. This does not happen in firefox or chrome, only in IE.
You can checkout my demo here
I was browsing the flowplayer forums and someone posted a solution, but the persons solution was not using jQuery UI, instead he was using jQuery Tools. So I am trying to figure out how to implement it in jQuery UI. I did not get any help from the flowplayer forums, so I thought I'd try in here.
This is the code the person used to supposedly solve the issue in jQuery Tools (forum post) I tried this using jQuery Tools and it didn't work completely.
incomplete jQuery Tools solution:
$(function() {
var api = $(".items").tabs(".tabs-cont").data("tabs");
api.onClick(function(index) {
var video = api.getCurrentPane().find("div.video"),
videoCont = video.find("div.video-cont");
videoCont.detach();
video.append(videoCont);
});
});
html:
<div class='video'>
<div class="video-cont"><object>FLASH EMED HERE</object></div>
</div>
I was able to figure something out on my own. Don't know if there is a better way of doing it, but it did solve my problem.
$( "#tabs" ).tabs({
show: function(e, ui) {
$.cookie( "tab-name", ui.panel.id );
},
select: function (e, ui) {
var tab = "#" + $.cookie ( "tab-name");
var video = $( tab ).find("div.media-container"),
flow = video.find("div.flow-container").attr('id');
$f(flow).stop();
}
});
Related
I want to use a preloader animation for my website and want it to fadeout after my site's all content has loaded. I have tried this
way:
<script>
window.onload = function () {
document.querySelector(".loader-container").style.display = 'none';
};
</script>
But sometimes the animation is going infinitely and i can't see any content of my website and sometimes it vanishes before the images had
loaded.I have searched google for various alternatives but none worked.
It will be a great help if anyone could help a beginner like me(it has been 3 months) by providing a code snippet to accomplish this.
I'm having trouble hooking up the F1 help function in AutoCAD Lisp with a custom Youtube video instead of showing the default AutoCAD Help files. I've found this article to be quite helpful, but it won't allow me to supply a youtube video in any way.
The custom AutoCAD browser is too old and does not support HTML5 (which is needed to run Youtube videos). Any help on how to solve my issue?
Case: How to bind the F1 help to a custom function in AutoCAD Lisp, then activate a Youtube clip on F1 keypress.
After a while, I got it all figured out. I had to use a combination of HTML/Javascript to trigger the default web browser (which hopefully supports HTML5), and then view the Youtube clip there:
Lisp:
(setfunhelp "C:MyFunction" "C:\\path\\to\\html\\file\\MyFunc_Help.html")
(defun C:MyFunction ()
(alert "this is my function")
)
HTML:
<html>
<body>
<script>
function OpenInNewTab(url, callback) {
var acWindow = window.open("", "_self");
acWindow.document.write("");
setTimeout (function() {acWindow.close();},500);
var newWindow = window.open(url, '_blank');
newWindow.focus();
}
OpenInNewTab("https://youtu.be/FERNTAh5s0I");
</script>
</body>
</html>
This HTML code opens a new browser window in your default browser, then closes the AutoCAD default browser after 500 milliseconds.
I hope this will be of help to someone.
I'm trying to automate an application that uses form security in order to upload a file and then scrape data from the returned HTML.
I started out using the solution from this question. I can define my steps and get through the entire workflow as long as the last step is rendering the page.
Here are the two steps that are the meat of my script:
function() {
page.open("https://remotesite.com/do/something", function(status) {
if ('success' === status) {
page.uploadFile('input[name=file]', 'x.csv');
page.evaluate(function() {
// assignButton is used to associate modules with an account
document.getElementById("assignButton").click();
});
}
});
},
function() {
page.render('upload-results.png');
page.evaluate(function() {
var results = document.getElementById("moduleProcessingReport");
console.log("results: " + results);
});
},
When I run the script, I see that the output render is correct. However, the evaluate part isn't working. I can confirm that my DOM selection is correct by running it in the Javascript console while on the remote site.
I have seen other questions, but they revolve around using setTimeout. Unfortunately, the step strategy from the original approach already has a timeout.
UPDATE
I tried a slightly different approach, using this post and got similar results. I believe that document uses an older PhantomJS API, so I used the 'onLoadFinished' event to drive between steps.
i recomend you use casperjs or if you use PJS's webPage.injectScript() you could load up jquery and then your own script to do form input/navigation.
I am looking fore some code allowing me to launch automatically a video after another one.
I'am using the great video.js library, which has a quite complete API. I found some snippet to get an event listener working at the end of the 1st video, but then I cannot launch the second one.
This is working, displaying an alert at the end of the 1st video :
_V_("intro").ready(function(){
this.addEvent("ended", function(){
alert('foo');
});
});
And this is also working, launching a video in fullscreen on page reload :
_V_("leader").ready(function(){
var leader = this;
leader.requestFullScreen();
leader.play();
});
But I can't get the 2nd video launching in fullscreen at the end of 1st video...
Last subtility, I would like to entirely build the 2nd video with javascript, not having to write it and just hiding id with CSS.
Thank you folks !
Elliot
You can simply use the provided 'src' method in the Video.js API, if you want to play a second video right after the first one finishes it would work like this:
_V_("intro").ready(function(){
this.addEvent("ended", function(){
this.src({ type: "video/mp4", src: "http://path/to/second/video.mp4" });
});
});
Is there an option in DOJO where files can be uploaded by Drag and Drop from desktop to the browser?
No I dont believe so. As outlined here and here its not really possible to do without using a plugin.
Old post, but still one of those posts being found by google easily. For those interested how to do this:
Have a look at this SO answer
Dojo overview of how to use its Uploader (styled as a button)
Use addDropTarget to link a dropArea for that uploader (for HTML5-enabled browsers -- see also first link))
To make the drop target visibly react to drag events, I had to connect directly to browser events like ondragenter or ondragleave (see code snippet below)
createUploader: function() {
// ... define uploader and droptarget
d_on(this.dropArea, "dragover", d_lang.hitch(this, this.dropAreaOver));
d_on(this.dropArea, "dragleave", d_lang.hitch(this, this.dropAreaLeave));
d_on(this.dropArea, "drop", d_lang.hitch(this, this.dropAreaLeave));
}
dropAreaOver: function(evt) {
evt.preventDefault();
domClass.add(this.dropArea, "dropAreaOver");
},
dropAreaLeave: function(evt) {
evt.preventDefault();
domClass.remove(this.dropArea, "dropAreaOver");
}