We Keep Coding

How to get file directory from webpage

currently i am creating chrome extension (video donwloader) and I am willing to get the video path
http://<IP ADDRESS>/video.mp4 from webpage where video is. and also in some websites they are using iframes to display the video and i also need to get the video from that url of iframe, here is one scenario: website is using another website for the video for example: example.com has a video on link example.com/video/ID/312351 and video source on videos.example.com/id/31312/video.mp4 and secondexample.com is using example.com/video/ID/312351 url in iframe to get the video, and when i am on secondexample.com i also need to get the video source (videos.example.com/id/31312/video.mp4) from example.com, Is this possible? and how. Thank You!

Cannot get swfobject 2.3.2 working on Firefox, Chrome or Safari

I am trying to upgrade my site from using swfobject 1.5 to 2.3.2 (latest version), I am unable to get the video to play in Firefox, Chrome, or Safari on Mac. The placeholder is replaced with the outline of the player, but if I right-click in the player region, I get the message: "Movie not loaded...". I have drawn from various examples from the web which all seem pretty straightforward and seem to agree.
I believe the path is valid, as all examples I have seen showed the movie file path to be relative to the hosting page (not relative to the placement of the swfobject.js file, as was with v1.5). In any event, I believe the path is valid for if I use an invalid path, space is not made for the player. I have even tried using an absolute URL. The file itself is also valid, as I can play it without any problem using swfobject v1.5.
I also have tried putting the javascript code in both the head, and also directly under the mediaspace (not simultaneously) but the results are exactly the same.
Here is the embed code:
Javascript (in head):
<script type="text/javascript" src="../media/flash/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF('../media/video/jewels.mp4', 'mediaspace_jewels', '400', '326', '10.0.0');
</script>
HTML:
<div style="text-align:center; width: 640px; margin: 30px auto;" id="jewels_video_container">
<p id="mediaspace_jewels">-- Something went wrong --</p>
</div>
If I examine the generated code in Firefox inspector, it shows:
<object style="visibility: visible;" data="../media/video/jewels.mp4" type="application/x-shockwave-flash" id="mediaspace_jewels" height="326" width="400"></object>
EDIT:
One thing I'm a little confused about, is I have not found an indication of how I reference the player I am using (JWPlayer). In v1.5 it was passed as the first argument in the SWFObject constructor.
EDIT2:
Here is an example:
http://kevinallasso.org/flashexample/html/psychotic.html
The directory structure is exposed for examination.

You're trying to embed an MP4 file. SWFObject only embeds SWFs, you'd then need to have a SWF file that loads your MP4 (such as JWPlayer).
JWPlayer has its own embed code, you don't need to use SWFObject. Also, JWPlayer supports HTML5 playback of MP4s, so Flash wouldn't even be required (but would be available as a fallback for older browsers). https://support.jwplayer.com/customer/portal/articles/1406723

As pipwerks pointed out, arg[0] for swfobject.embedSWF is data, not the movie file, so the Flash player .swf needs to go there (such as JWPlayer). So then how do we get it to play an mp4? How do we tell it what file to play? arg[6] takes flashvars as an object, and thus the filename can be entered as the file property, poster image as the image property. arg[7] takes params as an object.
In essence our code becomes something like:
<script type="text/javascript">
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "my_video.mp4",
image: "video/my_video_poster.jpg"
};
swfobject.embedSWF("video/player.swf",
"demo_video_flash",
"400",
"326",
"10.0.0",
"video/expressInstall.swf",
flashvars,
params);
</script>
The arguments are as follows:
0) location of Flash player swf
1) ID of the element that will be replaced by the player
2) width of video
3) height of video
4) Lowest version of Flash allowed
5) expressInstall.swf - Adobe prompt if version is out of date (see below)
6) flashvars
7) params
The generated code becomes:
<object style="visibility: visible;" data="flash/player.swf" type="application/x-shockwave-flash" id="demo_video_flash" height="326" width="400">
<param value="true" name="allowfullscreen" />
<param value="always" name="allowscriptaccess" />
<param value="file=my_video.mp4&image=video/my_video_poster.jpg" name="flashvars">
</object>
Note that, like SWFObject 1.5, the file property (filename of our movie) is relative to the location of the flash player, and the image property (poster image) is relative to the HTML file.
arg[5], the "expressInstall.swf" argument, points to a flash file which will trigger a prompt to the user to update their Flash version if it is out of date. More on express install: http://learnswfobject.com/the-basics/adobes-express-install/
swfobject.embedSWF actually takes 10 arguments; I don't know what the last 2 are.
As a side note:
While SWFObject 2.3 was updated to give HTML5 support, and also no longer uses <embed> tags but <object> tags instead (see 2nd link below for rationale), it is a Flash embedding tool and not a video embedding tool, and thus does not provide standalone "HTML5 with Flash fallback" support (ie, it will not write <video> tags), as does the embedding code that comes with JWPlayer 6 and 7 and others. HTML5 video support will have to be handled explicitly, as shown in this article: http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback/.
See also: https://github.com/swfobject/swfobject/wiki/SWFObject-and-HTML5.
SWFObject does have an advantage however in that it can be used offline, and also that no data is sent to any entity, if that is a concern. Some players which offer full HTML5 support can only be used online (eg, JWPlayer's full support versions).

Is it not possible to play an MP4 video in a Javascript lightbox designed for images?

I am using Firefox on Ubuntu Linux for testing. If I put the following link to an MP4 file in a page, the MP4 file plays in the browser window without any need for additional scripts or players:
<img src="/video/thumbnails/test.png" alt="" />
However, I want to be able to stay on the same page, and play the video in a popup window, with the rest of the screen darkened. I believe this effect is called a "lightbox".
Thinking I could just use any lightbox and leave it to the browser to play the video file, I found an open source Javscript library for doing the lightbox effect, called Lightbox2. It's light and simple.
Following the instructions, I loaded the Javascript in the <head> of my web page, and then I added data-lightbox="image-1" to the link:
<img src="/video/thumbnails/test.png" alt="" />
When I click on the thumbnail image, the lightbox effect works, but the video does not display or play. The lightbox darkens the screen and displays a white square in the middle with no video file or player controls.
I know there are Javascript lightbox effects designed for playing videos, but, since the browser can play videos anyway, what differentiates those Javascript libraries from the one I'm using?
Why can't I play a video in this simple lightbox effect?
Can it be modified to play video, or do I need to scrap it and find a different library? Recommendations for similar video capable libraries are very welcome.

I'm really sorry for getting back on this so late.
Okay so just an approach I had in mind at that time. It's left to you if you wanna try this out. But, if you want to avoid using third party scripts that you might have trouble tweaking here's simple approach. preferably, I'm going to use jquery code here just to make it look nice.
so lets say you want to have the video appear to pop up when the link is clicked. Why not just have our own div that contains a video element and then keep it hidden till we need it.
.
.
.
<body>
<div id="vid-container" style="display:hidden;position:fixed; background: rgba(0,0,0,0.5);
padding:40px; text-align:center;">
<video id="vid"/>
</div>
</body>
.
.
.
So, basically what I'm intending to do is that when a person click's on a video link, we'll use some jquery to toggle the popup div. As you can see that in the video tag I've only specified the id. This is only because I'm intending to set the video src and the codec after a particular link is clicked via javascript ( and a little bit of jquery).
So suppose we have a link like so:
<a href="Link_URL" class="vid-link" ><image src="img_URL" class="vid-img"/></a>
And a person clicks on it, this is how I though you could handle it through the following script.
<script>
$(window).load(function(){
// first of all I'm manually setting the pop's width and height to fit the entire screen
$("#vid-container").css("width",window.innerWidth+"px");
$("#vid-container").css("height",window.innerHeight+"px");
$(".vid-link").bind("click", function(){
// first get the video url from the link href
var vid_url= $(this).attr("href");
// now grab hold of the video and set it up by plugging in the video url
var video= document.getElementById("vid");
video.type="video/.mp4";
video.src="+vid_url+";
video.controls=true;
video.autoplay=false;
// now toggle the popup visible
$("vid-container").fadeToggle("slow");
});// end of click handler
});// end of window.load event
</script>
We'll I think that should solve the bare necessities of your requirement. You could do alot more with it.
Hope this helps :)
Viva la HTML5!

HTML5 subtitles on Ted Talk Videos

I noticed that on ted talks, when embedding the video flash there are subtitles if you choose to have them. However, the html5 version does not have any. I was wondering if there was any way to get this working. Right now I have the iframe opening up in a lightbox.
A hacky fix I can think of is have a floating div that changes the text based off the JSON subtitle file (ex: http://www.ted.com/talks/subtitles/id/70/lang/pt) but... if there's a better solution I'd love to know it. But if anyone knows how to implement the hacky fix, that'd be great also.
Thanks :)

Here is an article describing how to get started with the Track element, which you can use to add subtitles or captions.
Edit: build a separate file containing your HTML5 video and track markup, and then reference that as the iframe source.
<html>
<head>
</head>
<body>
<iframe width="560" height="315" frameborder="0" src="YOUR_HTML5_VIDEO_PLUS_TRACK"></iframe>
</body>
</html>
Then, your .vtt file would look like:
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
You can make this .vtt file in any text editor, and change the file extension. You will need to host this on a web server, it will not work locally (e.g. src=file://)

Issue with the flash fallback of VideoJs with Firefox

I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing.
Simple question: why?
I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case.
So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append.
This is my test code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf"
</script>
</head>
<body>
<video id="video" src="http://domain.com/flash/video.mp4" control></video>
<script type="text/javascript">
jQuery(function() {
var player = videojs('video', {"controls": true, "autoplay": false, "preload": "auto", "techOrder": ["flash", "html5"]});
console.log(player);
});
</script>
</body>
</html>
All the files (the swf player, the MP4 video, and the html file) are in the same folder named 'flash'.
Can you help me?

A few things to try here:
Make sure you're loading the video-js css file.
Add the "video-js" and skin classes to your video object as described here (also, it is "controls", not "control"): https://github.com/videojs/video.js/blob/0020ba15b9ae2b60e51d4d8d2751ffa31d18694d/docs/guides/setup.md
If you're loading video js from the CDN, you don't need to set the flash.swf option. That may be causing an issue as well.
You shouldn't need to set the techOrder to get Firefox to behave, and you definitely don't need a corresponding video file for each type of "Tech". Flash will play the fallback in mp4 as long as it's above version 9 or so.
I did run into an issue on Firefox where the Flash fallback would play the video but the video would be blank (audio would play) when I included a "ready" event. I was able to get around this by firing a blur event on the $(this) object. That may be helpful to you if you need to use ready.

You need a flv Version of your Video when you want to deliver it through flash.
It could be usefull to offer another webm Version of your Video. This should bei played in Firefox and Chrome.
For every Tech you need the correspondenting videofile.