I've set up a site for watching videos I've uploaded to YouTube. I'm currently using multiple html docs with each different video which is inconvenient. I'm wondering if there's a way I could read the URL of the video from a .xml file and run every video off one html doc instead of the 10 I have at the moment. (Or if anyone has a better suggestion of how to do it I would appreciate that just as much.) Cheers
I'm afraid giving a clear answer on this question is hard because it's kind of a big question.
It can't be done with pure HTML so you have two options that both involve learning something new.
If the host you put your site on allows you to use some kind of back-end programming language (PHP for example is very common) you can learn how to render more dynamic html pages and load a video based on some parameter in the URL (?video=1) for example.
If you don't want to go the back-end way you are going to need to look into javascript, which you can use to modify the contents of a html page dynamically. Using this route you can add an embedded youtube video to your page after it has loaded based on some kind of variable.
Of course thats possible, just think about an xml structure to store your urls
example might be:
<videos>
<video>
<url>youtube.com/asdf</url>
<title>First Video</title>
</video>
<video>
<url>youtube.com/ewqe</url>
<title>Secound Video</title>
</video>
</videos>
to read out the videos just iterate over the xml structure in JS and append them to your website or directly print them at page load via php etc.
Related
I know this question is simple and kind of silly but I really need to get an answer. I am doing some kind of family videos put together and I want that to be on one page or like an HTML file. but when I embed/link a directory file of video to the html it will play on the browser. Is there any way that when I embed a link it will just ask what application to open and will open on that video player that I selected? I'm not really that techie but I really need to make an offline HTML to organize my stuff. thank you so much in advance.
is there any way that when i embed a link it will just ask what application to open and will open on that videoplayer that i selected
Not all browsers do this, but many will. One way to look at this is that the browser in this case is the desired application for viewing that video. (Often times, the user didn't make this choice of course, it was made for them.)
There are a couple ways around this. One way is to add the download attribute to your anchor element:
<a href="video.webm" download>Download the video</a
This will suggest to the browser that the video should be saved to local disk, and not just immediately opened.
A second method is to use an M3U file. All you need in your file is something like this:
#EXTM3U
https://example.com/video.webm
These tend to open up in the default player. Just keep in mind that not everyone has such a player installed.
You have to make your video files downloadable by creating a download link to it. This will give the option of either open in browser or save to local disk.
When I have one basis html file in which I want to embed a few external html files as sort of a portfolio page, what is the best way to embed those external html files? I now use iframe, but I've read that is not the preferred way? What other options are there and which one is the best?
Most modern websites implement a server-side framework such as php or asp.net that can assemble the final HTML for each page and output it together
The only issue with iFrame is that it causes additional round-trips to the server, as the client has to load each frame individually, but if you don't have access to any server-side scripting then any other solution will do the same thing
We have a feature in our application which allows users to select a set of assets (images, videos etc.) and generate an embed code for those, which can be embedded in another web page. As of now we use iframes to implement in the embed code where page pointed by src attribute of iframe spits out HTML to embed.
For some security reasons we want to get rid of iframes and replace that with something else like an object tag, script tag etc.
My question is about object tag. Primary use of object tag seems to be to embed a video, a pdf etc. I know it can be used to embed an entire webpage just like what we want. But my question is - is that recommended? The webpage we want to embed will have a set of assets with options to sort, download, share, preview those assets.
So will it be a good practice to use object tag for embedding such a complex web page? Or is it meant for minimal usage like embedding a video clip, a slideshow etc.?
Depending on the type of technology you are using, you can do something similar.
With your request you are getting into the portlet/web part discussion, where you want to embed portlets (mini apps). There is no object tag you can use (to my knowledge its only image, applet and iframe I think) from the client side, but you might be able to pre-load the parts before you send the user the final page (say, like wordpress widgets in php).
Otherwise you need to go the Javascript route, and do some kind of lazy loading of your 'widget/applications' as needed.
I simply want to embed a PDF file in a web site.
The best solution I've found is Google Docs Viewer (http://docs.google.com/viewer), but it does not work for IE and obviously that is not going to work for me.
Anyone have a clean, easy solution to this?
Update: I should add that one of the benefits of embedding the PDF file the Google viewer way is that as the PDF file I link to gets updated (and it could without notice to me), my site would automatically be holding the same PDF file (provided the full pathname doesn't change, which it does not). For this reason converting the file to an image is not preferred while.
Well since you obviously don't want to force someone to download the bloated insecure pdf plugin, why not let them use the bloated insecure flash player?
http://flexpaper.devaldi.com/
But really it is just a simple as
<iframe src="path/to/pdf" width="500" height="700">
If you do stick with the pdf embedded option, Byron is right although embedded pdf files don't look so great on a webpage. Anyway, be sure to be strict about the coding. Hence:
<iframe src="path/to/pdf" width=500 height = 700>
Should be
<iframe src="path/to/pdf" width="500" height="700">
Small alteration.
Updated answer for HTML5:
<object data="filename.pdf" type="application/pdf">
Your browser does not support pdfs, <a href="filename.pdf">click here to
download the file.</a>
</object>
You can read about it here:
http://www.w3schools.com/tags/tag_object.asp
How long is the pdf file? Can't you convert it to a very long image and display that in a div with a scrollbar?
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
enter link description here
You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:
<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
I just ftp mine, I do not use Google or any other s/w
you must have some need other than a PDF file sitting in a directory, what is it?
Also, why would you convert the image (and reduce PDF resolution and clarity) ?
Response to Comments
That is the ugliest thing I have seen since my last trip to Africa. You are not seriously thinking of posting that much information on a single page, are you. No one can read it, and I tried every magnification.
For that amount of info, you need to take an architectural approach.
Put a few controls on the front page, and feed the user a small amount of manageable info, about the area that they chose. Only.
Get the info from the source website/database and feed it into your website/database. Only needs to change when the source data changes. The whole linkage can be automated.
Then you just create nice clean pages, with a reasonable quantity of info, in a readable form, on each page.
This is a 20th Century Timetable. Note, not a 21st century timetable (look at Berlin or München for one of those). You really can't just scan an intense doc and provide it as an embedded PDF.
Note that you do not need the elaborate controls of CityRail. you can have just a few to allow select of the line and timetable.
then produce a page that is a simple form of the CityRail page.
or (the absolute minimum) one fully viewable, full size PDF per web page.
.
Like this simple viewable PDF. That example could be served up in one PDF for page 1 and 4 separate PDF pages for the rest; PDFs already have basic navigation, so I have used that feature and produced one 5-pager instead. Make sure you find and use the blue glass buttons and follow the navigation hints on the left top and bottom of each page.
Second to demonstrating the PDFs and navigation, look at the folder: the files are all PDFs.
Back to the original question. Now you can embed PDFs, but if you do, please do not mess with them. All the controls you have on the linked page are redundant; any browser facilitiates that even now, and will be doing so better in future. Eg. in simple viewable PDF, use your browser controls to increase/decrease magnification, move around the doc, etc.
Let's assume you finish your Google Maps page, that's the first or index page. Draw all the train lines in; when the user clicks on a train line, it takes them to either (a) a clean page produced from your db as per (1) which will look like (2), or (b) a single clean PDF in readable form as per (3). You could do the whole project just by manipulating files in directories.
A lot less work. No Google docs; no intermediate s/w to constrict you or work around. You can forget about IE and its multiple incarnations and strangulations; any other browser and its limitations. Concentrate on the data, and getting it out there in presentable form, not on the pitiful s/w and its fits and starts.
Cheers
From HTML5 :
<embed src="url" type="media-type" height="" width=""/>
For media-type refer, http://www.iana.org/assignments/media-types/media-types.xhtml
Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.
Here's the code I used to embed the PDF file:
but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.
http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html
I would like to know whether it a possible to detect whether a HTML page contains a video.
I know that one possible way is to look for ".swf" in the HTML source code. But most of the pages do not contain the file name.
For example, given following URL and possibly its source code, is it possible to find out whether it contains a video:
http://www.cnn.com/video/
There are many ways to embed Video into a HTML page - as Flash Video or instances of Platform-Specific players through <object> and <embed> tags (but not every one of those tags is a video! The same holds true for .swf - it's just the file extension of Flash files, Video or not), the new HTML 5 <video> tag... They are not impossible to find out but it's a lot of work to catch all possible player types, formats and embed codes, and will result in a lot of false positives / negatives.
Then, there are JavaScript libraries that initialize players after the containing page has loaded - those are almost impossible to detect.
It's still a very complex issue to get video into a web page reliably, and subsequently, it's even more complex to find it out. Depending on what you are trying to achieve, I would consider dropping it.
For your case (CNN site) you can parse Open Graph micro-markup for a video information.
Meta tags such as og:video:type, og:image will help you.
Video hosting services usually support micro-markup, e.g. open graph or scheme.org.
So you can parse these markups.
Check if an <object> tag exists in the DOM and check its content type and parameters. You will find the pattern by yourself.
You can also search for .flv, or .mp4 in the source code.