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" });
});
});
Related
My RTC session was started with text only. And video is added by user when needed (renegotiation)
navigator.getUserMedia({ video: true, audio: false }, function (myStream) {
localVideo[0].srcObject = myStream;
myConn.addStream(myStream);
}, function (error) {
console.log(error);
});
When user do not need the video session anymore, I remove using:
var tracks = localVideo[0].srcObject.getTracks();
tracks.forEach(function (t) {
t.stop();
});
myConn.removeStream(localVideo[0].srcObject);
localVideo[0].srcObject = null;
Everything is working fine, until I try to add the video again I noticed that the createOffer() request size is getting larger and larger.
Seems to me that WebRTC didn't forget about the previous stream, and is adding to the offer again and again. Or maybe my way of removing a video stream / track is wrong?
This is a known issue see this thread on the W3C list.
The best way to get around this is to use replaceTrack and is suggested in the thread.
Note: It is still possible to prevent the list of transceivers from growing
by *manually* recycling them using transceiver.sender.replaceTrack() and
transceiver.direction, but that still wastes resources on transceivers
currently not used, and implies you probably shouldn't use
transceiver.stop() in most cases.
Also see the "Unified Plan" Transition Guide
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.
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");
}
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();
}
});