Absolute Iframe URL issue - html

I will admit I'm very unfamiliar with html - I've only really worked with object-oriented programming and not markup languages.
I'm working on audio controls for a website for someone else, I feel like I understand how the control tag itself works, but I cannot make the urls I link or function in audio players. I think it's the because of how I'm uploading the files, but I don't know if a website directly uploads the files. (I've tried using dropbox/google drive, but I don't think I can get the link I would need for that.)
Because of requests from the employer I'm working through go-daddy's iframe and not creating from scratch if that is relevant.
The upper line is my attempt at writing audio controls, the second controls are just an example I've been trying to mimic.
Code in question

Related

Embedding pdf and images in html

I need to embed both pdf-files and images in my html-page, however, due to the fact that my html contains a form and the user has to be able to decide whether he would like to upload a pdf-file or an image, I need a flexible solution regarding how to embed either a pdf-file or an image with the same code.
I read that I could possibly use the <object/> tag, however, I also read that that's not a very "elegant" and possibly slow solution.
I also considered to use <embed/> which, as of right now, is the best solution I could come up with. Unfortunately I couldn't find out about if it's a very conventional solution or not.
I can't seem to find very much resources regarding this topic online, hence why I'm asking here. Are there any other/better ways to embed a pdf- or image-file in an html page?
Edit: I want top display the pdf kind of like a file. Also, I don't want the user to be able to resize the pdf in the viewer
I'm sure this is better suited to a comment, however I'm new and am working on unlocking that feature.
...however,
due to the fact that my html contains a form and the user has to be
able to decide whether he would like to upload a pdf-file or an image...
What are you using for the form (query language & database management)?
(PHP, Django, MySQL, MongoDB, etc)
Are there any other/better ways to embed a
pdf- or image-file in an html page?
I would recommend using embed or iframes. You are correct in thinking that the object tag is not an elegant solution, since you are dealing with images.
Edit: I want top display the pdf kind of like a file. Also, I don't
want the user to be able to resize the pdf in the viewer
Easy to do with iframes. There's a lot of hate when it comes to iframes. As you seem to plan on using it as a tool to display a file within a page, then I believe using an iframe here is just fine.
Check out this link on iframes. (will also tell you how to keep the user from resizing it)

HTML 5 Preventing Download

I am working a website, and I'm trying to prevent the video file to be downloadable.
I've already prevented the right click function, and I've used a webiste called http://htmlobfuscator.com/ that allows the source code to be very difficult to decipher. The only issue I now have remaining is the inspect element feature on browsers. Does anyone know of any way to prevent this? I know that someone is always going to find a way to download or capture a video, but I'm just trying to limit the spread of my videos.
Thanks for your help,
Stephen
There is no actually way of completely stopping someone, you could however as some have mentioned use something like Vimeo or YouTube to minimize the downloading of your videos, or another way you could do it and have found from personal experience is either creating a login/register on your site to make someone signup to get your video thus minimizing how many can download it or you can encrypt the video with a password, i believe Vimeo has this option which requires someone to enter a password in before even viewing the video.
Yet these are just two ways to Minimize not completely stop.
There is no way to stop a browser's document inspector from finding your file's location. However, I am a recording musician, and I know of a few things you can do to make thieving more difficult.
Put your JS video location in an external file. Not a lot of protection here, but worthwhile enough to add.
Break up the video location into a few different JS variables. Your thief would at least need some basic JavaScript knowledge to get to the video location.
Use an obfuscater, like you did. (I LOVE HTMLObfuscator!)
You could use flash video. This is difficult to download, but slower viewing, and also a bit more difficult to create and host on your website.
The best thing to use is streaming video, but not everyone is able to do that either.
Good luck!

Embedding an SWF Video in Wordpress: Many roads to failure

I've been racking my brain and my search bar with what I thought was a simple question:
I'm trying to add an SWF file, hosted on the same server as the blog, into a blog post. I need it to autoplay and have controls. I'm also trying to avoid using the embed element, i've read it's wonky.
When using SWFobject Wordpress mangles the conditional comments, deletes parts of the code, adds the embed element, and sometimes changes the dimensions.
I've also tried using Wordpress Shortcode: it does nothing but hyperlink to the video. I'm thinking this is due to no oEmbed support though i'm not sure.
Is there a way to turn off Wordpress's Object/comment mangling? What is best practice for using Wordpress and embedding video?
In case anyone out there is running into similiar issues:
I used JW Player free, which uses the script element in the post body to generate the swf code, bypassing wordpress's mangle tangle.

HTML5 Canvas - How does the origin-clean flag get set to false?

I started working with HTML5 Canvas and Video and I keep having this problem: I try demos and experiments but I can't view them unless I upload them to my web server. At the moment this doesn't pose a huge problem because I'm working with comparatively small files, but I'm actually preparing a bigger project, and this problem would become quite inconvenient very quickly. And also I would just like to get my facts straight. I have been working with both, my own created videos and those from demos. I worked with videos I encoded ages ago and I worked with videos I encoded a minute before using them in my code. It's always the same result, using the HTML5 Video container works, using video inside Canvas doesn't, Canvas just doesn't display any video (unless, like I mentioned, I upload them to a server).
This is the information I found so far:
http://html5doctor.com/video-canvas-magic/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements
(and a little bit of information on w3, but I'm not allowed to post more than two links)
From what I understand, my canvas must be tainted and my files don't appear to be 'origin-clean', but this is all I have been able to figure out. I don't understand why.
Does anybody know more about this and can explain how and why this works?
There's a strict separation within browsers between anything loaded from http:// and anything loaded from a file:// URI. This is actually pretty sensible, otherwise random pages you loaded from the web would be able read files off your harddrive. There are several additional restrictions that apply to file:// URIs themselves, again these are aimed at not letting files you've downloaded from the web having free run of your harddrive.
Having said all that, if your HTML file and the videos are all sitting in the same directory on your harddrive then everything should still work as all these conditions should be met.
If you're still having problems, one useful approach for local development is to use a lightweight web server. Personally I use Python's SimpleHTTPServer because it was already installed on my machine, but there are many others - often web development frameworks (eg. Ruby on Rails) come with them built in.

Simple way to embed an MP3 audio file in a (static) HTML file, starting to play at a specifc position?

I want to produce a simple, static HTML file, that has one or more embedded MP3 files in it. The idea is to have a simple mean of listening to specific parts of an mp3 file.
On a single click on a visual element, the sound should start to play; However, not from the beginning of the file, but from a specified starting point in that file (and play to the end of the file). This should work all locally from the client's local filesystem, the HTML file and the MP3 files do not reside on a webserver.
So, how to play the MP3 audio from a specific starting point? The solution I am looking for should be as simple as possible, while working on most browsers, including IE, Firefox and Safari.
Note: I know the <embed> tag as described here, but this seems not to work with my target browsers. Also I have read about jPlayer and other Java-Script-based players, but since I have never coded some JavaScript, I would prefer a HTML-only solution, if possible.
Update: By now this has become a live tool, located at http://quir.li/player.html. I ended up using the excellent mediaplayer.js by John Dyer
I'm sorry but I don't think it is possible to skip to a specific position in a track without any form of client-side scripting. It is possible to just play a track without client-side scripting using a link with its target pointing to an iframe on your page.
Eg.
Play audio
<iframe src="nothingplayingnow.html" name="myplayer"></iframe>
If you'd like to embed the audio file itself into the html document, I think the closest you'd get would be to use the data URI scheme. All the pros and cons are explained nicely in that article.
But all of this is of course possible if you use a bit of client-side scripting. This flash MP3-player lets you skip to certain positions via a javascript interface. The site also has a generator which lets you make your own player interface very easily.
Sorry, but I think you'll have to use at least some javascript to achieve what you're attempting.