HTML5 subtitles on Ted Talk Videos - javascript

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://)

Related

Embed Livestream into Website (Without Available Embed Support)

I am trying to embed a streaming preview of Caffeine.tv into my website.
Caffeine.tv has no official embedding or at least not for what I know but moderators of the platform told me you can do it yourself I only have no clue how and hope people here would be able to give me a hand in that.
Normally you watch Caffeine.tv stream through for example https://www.caffeine.tv/Kaph which shows an image of the URL but no visible video.
There is a workaround for that which is watching over https://preview.caffeine.tv/kaph
This shows preview but no window in the link now what I would like to do is use the preview URL and embed that into my website.
I look forward to support!
What you want can be achieved by using an iframe :)
<iframe src="https://preview.caffeine.tv/kaph"></iframe>
Please note, the above may not load correctly depending on Stack Overflow's allowance of cross-origin content from iFrames.
Please see this working on JSFiddle

How to embed a PDF in an HTML page?

I need to embed a PDF file in an HTML page for the users to see it on every major device.
Most of the approaches work fine on desktop but they start to show problems on iPad devices. The PDFs are no longer scrollable if placed inside an iframe or embed tag.
I used the following techniques to overcome the problem:
1) Using pdf-image for node and converting the PDF to images and then sliding them in a div.
The problem in this approach is that the image quality gets degraded and is not suitable for viewing on Web.
2) Using PDF.js by Mozilla
It works fine on every device but it makes the page extremely slow and unresponsive on iPad
3) Using Google PDF viewer
<iframe src="https://docs.google.com/viewer?url=http://public-Url-of-pdf.pdf&embedded=true" frameborder="0" height="500px" width="100%"></iframe>
The problem with this approach is that I need to make my PDFs publicly available which I don't want to do for security reasons.
None of the above method is working for me. Is there any solution available to embed PDF in a page which works on iPad also.
One of my colleagues told me about using LibreOffice(open office) headless to embed PDFs in my page but I cannot find any documentation about it usage?
Can anyone please help? :(
Thanks in advance!
<embed src="http://example.com/the.pdf" width="500" height="375" />
Try above one for pure HTML. But another option is if you'd like to use with javascript, try Pdf.js by mozilla. https://github.com/mozilla/pdf.js
I think the simplest way to embed a PDF into a web page is to use the object tag:
<object data="assets/test.pdf" type="application/pdf" width="100%" height="800px">
<p>It appears you don't have a PDF plugin for this browser.
No biggie... you can <a href="assets/test.pdf">click here to
download the PDF file.</a></p>
</object>
What the code above will do is:
- If the user browsing your site has a PDF viewer plugin (which is included by default in some browsers) it will open the PDF in the browser:
- If the user does not have a PDF viewer plugin, they will be presented with a link to download the PDF and view it on their site.
I spent a lot of time with this issue and finally reached a solution for embeeding PDFs in a HTML files, also inspired by this post. You mentioned that "converting the PDF to images and then sliding them in a div" was not satisfactory due to quality problems. Here I experienced the same since the images were blurry.
However, I tried converting the images to SVG instead of PNG and the situation was a different one: The fonts were crystal-clear when embedding the image like below:
<object type="image/svg+xml" data="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg">
<!-- Your fall back here -->
<img src="https://ik.imagekit.io/nudvztcu8my/pdf2svg_example_Ft2FQgqWaG.svg" />
</object>
You can directly paste that snippet into a HTML file and you will see the result. For producing this example I used a ramdom PDF from ArXiv.org and converted it to SVG using an online converter.
There are also free command line tools like pdf2svg or commerical APIs like Aspose and probably it is worth examining which approach gives the best results.
You can easily build a slider which is loading the SVG images dynamically and it is even possible to scale them to different viewports due to the vector character of the SVG images. The approach so far worked for all PDFs I tried but probably it is recommendable to implement a fallback solution still using PNGs.

Youtube Iframe Api get video title

I am using the youtube iframe api to embed newest uploaded videos from a youtube channel onto my webpage. I am successfully able to do this; however, I need to get the title of each video as well and display it within the html next to each video. So far, I cannot find a solution to do so.
This is my code to retrieve one video. I am using this method so that I can embed the videos within a carousel that I have made, with each embedded video fetching the next latest upload (a different index from the same playlist).
<iframe width="300" height="300" src="http://www.youtube.com/embed?autoplay=0&max-results=1&controls=0&showinfo=1&rel=0&listType=user_uploads&list=channelName&index=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Can anyone provide me with some tips on how to obtain the title (and possibly other information related to the video such as a date)?
All help is greatly appreciated!
Thank You!
-TT
With the new YouTube API there's no way to do this using Javscript or jQuery. However, there seems to be solutions that use PHP:
Solution Using PHP
If you're not comfortable with PHP and/or you're not uploading a lot of YouTube Videos, I would suggest either hard-coding the titles into your HTML or creating a column(s) in your database for the relevant information.

save/print pdf embedded

I have 2 external buttons which will be printing and saving an embedded pdf on the page. After a couple of hours searching on google I couldnt find any helpful to solve this. I know that the embedded object has buttons to print and save, but the client wants it with 2 outside buttons. I'll appreciate any help you can give me, thnx.
This is how I have the pdf
<div class="test">
<embed src="embedded.pdf" width="300" height="175" />
</div>
Does not look like this is possible for all browser due to security concerns. Please take a look at Invoking the print/save/email function of Adobe Reader plugin in browser for further explanation.
However, it may be possible with ActiveX in IE, see Silent print a embedded PDF.

Replacing Flash movie with QuickTime movie in a website

Here is what I have:
<script type="text/javascript" src="http://www.polycysticliverdisease.com/html/swfobject.js"></script> <div id="flashcontentab3445" align="center"> You probably do not have the Flash Player (Get Adobe Flash Player Here) installed for your browser or the video files are misplaced on your server!</div> <script type="text/javascript" src="http://www.polycysticliverdisease.com/html/easyflvsvab3445.js"></script>
Here is the .flv file:
polycysticliverdisease.com/html/debbie.flv
How do I replace it with a Quicktime movie?
Thank you in advance!
Your javascript code doesn't say much, there's no reference to the swf file which I suppose is loading your flv file.
I guess you don't want to use Flash , otherwise why would you want to replace your flv with a Quicktime movie. You need to give more info about what you're trying to achieve otherwise the only answer you may get is just to link to the .mov version of your .flv
edit//
Google ".flv to .mov converter" and pick your choice.
When you have a .mov file , you can create a link
Click <a href=http://polycysticliverdisease.com/html/debbie.mov>here</a>to watch this movie!
and use the following code in the div of your choice , adapting the width & height values
<EMBED SRC="debbie.mov" WIDTH=240 HEIGHT = 196
AUTOPLAY=true CONTROLLER=true LOOP=false
PLUGINSPAGE=http://www.apple.com/quicktime/">

Categories