1

I need to let users embed videos, images, audio files, etc. inside text. For right now, these videos will come from urls, but they might one day point to videos/images/audio files stored on the server too.

The text they are writing is using a javascript editor that allows them to change the formatting, size, etc.

I am sort of at a loss as to easily let them add images, videos, audio files inside of the text. I'm just not sure the best way to go about it. I can think of a few technical solutions, but I don't even know if they are worth pursuing.

My first thoughts were to create a parser/language for embedding these kinds of things. That way when they give the url to a video or mp3, it would translate that into some javascript to stream the file. The syntax could be something like [video]http://www.somewhere.com/myvideo.flv[/video] - and it would translate this to using jwplayer or something like that.

Is that too complicated? Is there a better way to go about offering this feature?

Letting them put the videos/images/audio clips at the exact position in the text is important. It can't be at the end of the text or anything like that.

They don't need to play the audio/video content in the textarea, but they do need to see that it's been added. I plan on taking these placeholders and translating them to the appropriate html/javascript code so that when this text is viewed elsewhere, they can play the video and listen to the audio.

Improve this question
4
  • Are the files from the Internet or their computer? If their computer, is Drag and Drop an option?
    – Zelda
    Commented Nov 7, 2011 at 23:18
  • For right now, the files will be located on other internet locations, so they will be providing urls of some kind. I may need to support urls and uploads though. In terms of drag and drop, does that mean I have to create my own editor to handle this? Is there an editor that can do already?
    – egervari
    Commented Nov 7, 2011 at 23:51
  • I was suggesting drag and drop for the interaction of adding files; positioning them in the text would be difficult directly via a drag and drop operation (and I'm not sure Javascript supports such granularity). If it's all links to content I would try and emulate Stack Exchange's editor, which fixes the issue of positioning and allows you to use both buttons to walk your users through the steps of adding a link/image, and lets advanced users get straight to the code if they choose.
    – Zelda
    Commented Nov 8, 2011 at 14:12
  • How does the YUI rich text editor plugin compare to your needs? developer.yahoo.com/yui/examples/editor/flickr_editor.html
    – Zelda
    Commented Nov 8, 2011 at 14:24

1 Answer 1

Reset to default
1

This depends on what kind of users you have.

For relatively tech-savvy users, asking users to write some kind or dorky syntax might be ok. But you still have to figure out how to let the user upload the image, and if you don't provide this capability, the user will have to figure it out on their own. However requiring knowledge of a special syntax to embed an image is 100% non-discoverable and users will have usability problems.

Depending on how much implementation work you're willing to take on, you can create a pretty good image-embedding experience on the web today. Look at gmail running under a modern browser -- it allows uploading images, embedding images from a URL, and even pasting images from the clipboard. I suspect that this is a lot more usable.

Since this site concerns itself with usability my answer would be "do the work, and copy the gmail experience." Whether or not all that work is cost-effective for your situation and user base is up to you to decide.

Improve this answer
1
  • Yeah, it seems they do support dropins of images right onto the text area. I'm guessing this is custom ajax, and didn't come out of a library. I also need to support videos and audio too. Is it terribly hard to create a jwplayer or some audio streamlining thing inside of a textarea as they are typing? Or do I use some kind of thumbnail/object as a placeholder, but generate the jwplayer/audio streaming javascript code afterwards? They don't need to play the video/audio as they type, but they do need to see it and know where it's going to be in the text.
    – egervari
    Commented Nov 8, 2011 at 1:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.