/    Sign up×
Community /Pin to ProfileBookmark

playing music and video clips without FLASH

Folks, I don’t expect an easy answer here, especially since I barely have time for working on my web site anymore. I run “Peter Pan’s Home Page”, a huge and admittedly poorly organized site I’ve grown and grown since 2001. There I’ve used a lot of pages that work with some free FLASH players, both to play MP3 music clips of my own compositions (example: [url]http://pixyland.org/mymusic.html[/url]), and also videos I’ve converted to flash files (FLV) of such things as my wedding (example: see the bottom of [url]http://pixyland.org/peterpan/OurWedding3.html[/url]).

For me, it was a lot of work to find and learn to use these players, and in the case of the videos, a lot of work to get decent conversions of the original videos to FLV files. I did this because for a while there it seemed that FLASH was destined to become the universal way to play videos and music files, in a way that was easily controlled with javascript, and because of YOUTUBE would soon be common to every browser on the planet But it didn’t work out that way. Sadly I’ve now seen that nobody with an apple desktop, I-PADs or I-phone can view or play my media, and even the android devices won’t play FLASH content (unless the user goes out of his/her way to install it, something most casual users have no clue about).

So what can I do? I’d like to think there is some collection of methods guaranteed to allow the vast majority of visitors to hear and view my content, so that if I put in another huge effort it will be done forevermore. But that was what I thought FLASH would do for me, and now it seems my efforts have been largely wasted, or at least made obsolete.

to post a comment
Full-stack Developer

14 Comments(s)

Copy linkTweet thisAlerts:
@kralcxDec 28.2013 — your answer is html5. This article will help you out with how to set things up properly

http://diveintohtml5.info/video.html

This site will help you with the code:

http://v4e.thewikies.com/
Copy linkTweet thisAlerts:
@PeterPan_321authorDec 28.2013 — This is excellent news! The article you pointed me to seems centered on video, using this new <video> tag. Before I delve deeply into this, do you know if a similar standardized tag methodology is available for audio MP3 clips? I AM interested in updating my site, for sure. As a musician though, I'm actually just as interested if not more, on being able to universally play music clips on any browser. Thanks for any help!
Copy linkTweet thisAlerts:
@kralcxDec 28.2013 — This article should help you with html5 audio

http://html5doctor.com/html5-audio-the-state-of-play/
Copy linkTweet thisAlerts:
@PeterPan_321authorDec 28.2013 — Kewl thanks!

hey one more thing... looking at that HTML5 page you showed me, I did get a little discouraged about something that should have been obvious to me. It looks like the new <video> tag standardizes a structure for ensuring your content will play using whatever is available. BUT... it certainly doesn't spare me the headache of converting my videos to all these other formats.

When it seemed that FLASH was going to be the end of the story, you could upload anything in just about any format to YOUTUBE, and then use one of those player simulators to capture the converted streamed FLV file. Then you could delete the video from Youtube and keep the free conversion. To do this again, I'd have to find some way of taking MPG clips from my camera, or AVI videos I created with Roxio, and first find a way to convert to Mp4, WEBM, OGG, and of course the original FLV flash files. Then equally daunting, there's no easy way to prove each player works as you hoped, unless you buy all the different computer and browser types to test on.

Something tells me this will be a lot more work than I'd hoped! :-(
Copy linkTweet thisAlerts:
@kralcxDec 29.2013 — in that article it mentions the Miro Video Converter http://www.mirovideoconverter.com/

that should convert your video into the various formats for you

As far as cross browser testing is concerned use virtualbox (this is the free way to do it) and you can have as many browsers on your system as you like
Copy linkTweet thisAlerts:
@PeterPan_321authorDec 29.2013 — Virtual Box! Yes thats a great idea! Hey as far as the HTML5 audio article goes, it seems like kind of the same problem, though not quite as bad because it seems a lot of browsers will now natively support Mp3 files. I was surprised though to see this Ogg format I'd never heard of, but OK... its just another conversion.

But I wonder if maybe threes been more native formats supported since the article was written, since it mentioned the "current version of Firefox" as being 3.6, which was already a few years back. If the browsers are attempting to natively support audio, you'd think they would all support MP3 by now. But if not, FLASH always did. And since I already have my pages with audio set up to work with flash, maybe I could re-write my code to use the flash players with my MP3s if flash is available, and fall back to using the audio tag method if not.
Copy linkTweet thisAlerts:
@kralcxDec 29.2013 — Here is a javascript method that may help

http://mediaelementjs.com/
Copy linkTweet thisAlerts:
@PeterPan_321authorDec 30.2013 — Thanks Kralcx! Very much appreciated!
Copy linkTweet thisAlerts:
@Hearty_GuyJan 10.2014 — This is what I'm hearing on the investment side about "Play Anywhere" Clipstream G2:

[I][B]Clipstream videos never need to be upgraded and the expectation is that a video encoded in the Clipstream format today will still play browsers 15 years from now.



Videos in the Clipstream format just play everywhere, there is no streaming server and for viewers there is no need to install or maintain player plugins. Videos in the Clipstream format can be locked at source websites, they can be locked being what the specific recipient computers and they can be watermarked. None of the other solutions provide any [viewer ever] security at all.[/B]
[/I]


I don't understand all this technology but it seems to me that CLIPSTREAM ® does offer a solution to the problems that you are commenting on here. If it sounds interesting please visit the dsny dotcom website and let me know if Clipstream is an effective solution or not. Thanks PeterPan.

My prior post:

These are the problems and these are the solutions that Clipstream supposedly offers:

Problem 1

There is no standard format for streaming video on the Internet. To reach all browsers, publishers have to convert into several formats including: WebM, Ogg Theora, H.264, H.265 and Flash. This transcoding process is costly and it means storage and data center costs are much higher.

Solution:

Clipstream® plays instantly on all modern browsers and devices including computers, smart phones, tablets, e-readers and Internet enabled TV's. Viewers don't have to install or maintain plug-in player software.

Problem 2

None of these formats are widely adopted. On desktops, none of the replacements for Flash reach more than 2/3 of the audience.*

*
WebM: 54.32%

H.264: 63.43%

H.265: 0%

Ogg Theora: 50.22%

Adobe announced that Flash would no longer support mobile. and Apple will not support Flash on IOS devices.

Solution:

Because there are no plug-ins for users to maintain or upgrade, content owners will be able to reach all HTML 5 compliant browsers.

Problem 3

Streaming generally requires streaming servers and to reach a large audience, content delivery networks. More than half of all data transferred on the Internet is video and video data transfer is growing at 48% per year.

Solution:

Because there is no streaming server and because the content caches, Clipstream® allows publishers to host content directly on their own web servers rather than outsourcing. HTTP caching can recycle streams allowing loads to be reduced by up to 99% for popular content.

Problem 4

HTML 5 video tag formats are unprotected and videos can easily be copied and shared.

Solution:

Clipstream® encoded videos can be watermarked and locked to only play from authorized source websites or to authorized viewer computers.

Problem 5

With other solutions, videos become obsolete over time, as new formats replace old ones. The new H.265 format isn't compatible with any existing web browser and is intended to phase out old videos encoded in H.264.

Solution:

Clipstream® encoded videos will have extreme longevity as all future web browsers will be required to be backwards compatible with the technologies behind it.
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 13.2014 — I'm not sure what to make of this. I visited their website and saw all the same claims. BUT... there's no info on how it works (somebody HAS to make the video conversions) , or how much it costs, or anything I'd call IMPORTANT DETAILS. I've used their form mail to tell them I wanted more information, so I'll post whatever they respond. I *SUSPECT* that they, like many folks looking to market a product (guilty!), they have put up a website fishing for interest, and are doing so BEFORE the paint is dry on the product. We'll see! :-)
Copy linkTweet thisAlerts:
@Hearty_GuyJan 13.2014 — [I][U]I'm not sure what to make of this. I visited their website and saw all the same claims. BUT... there's no info on how it works (somebody HAS to make the video conversions) , or how much it costs, or anything I'd call IMPORTANT DETAILS. I've used their form mail to tell them I wanted more information, so I'll post whatever they respond. I *SUSPECT* that they, like many folks looking to market a product (guilty!), they have put up a website fishing for interest, and are doing so BEFORE the paint is dry on the product. We'll see! :-)[/U][/I][/QUOTE]

Thanks for those important comments. Something I have not done yet is to simply try out their Clipstream G2 product. You can embed a video into your website, no transcoding needed, just cut and paste... at least that is the way I understand it. Visit https://my.clipstream.com/ to download the Clipstream uploader for windows. You don't need to embed the video in an actual website to test this system, you can upload any .mp4, .mov, .avi or .wmv to a free Clipstream Cloud account.

If you find any bugs you can report them here. I think they have it pretty well debugged by now.

https://my.clipstream.com/bugs.php

I hope you have already gotten a better answer directly from the company — I by no means understand any of this technology. But I am trying to find out. Thanks again for your prior comments!
Copy linkTweet thisAlerts:
@Hearty_GuyFeb 14.2014 —  I've used their form mail to tell them I wanted more information, so I'll post whatever they respond. I *SUSPECT* that they, like many folks looking to market a product (guilty!), they have put up a website fishing for interest, and are doing so BEFORE the paint is dry on the product. We'll see! :-)[/QUOTE]

I'm curious if you ever got in response to that form e-mail?

Clipstream is definitely up and running and was for some time now. You can download the Clipstream uploader for Windows here:

[SIZE=2][B]https://my.clipstream.com/[/B][/SIZE]
Copy linkTweet thisAlerts:
@PeterPan_321authorFeb 14.2014 — No I didn't. Not a word. And it was both form-mail, AND an address on my own domain that doesn't get filtered without my knowing. I can't imagine how they could have done what was promised anyway.
Copy linkTweet thisAlerts:
@Hearty_GuyFeb 14.2014 — I forwarded your comments to management at Destiny Media. I doubt that we will hear anything back though because they are very, very busy getting the Mac version of the software ready for prime time. In the meantime, the only way to find out if they can do what they say they can do with Clipstream might be to go to the aforementioned site [B][SIZE=2]https://my.clipstream.com/[/SIZE][/B] and create a free account and run Clipstream through your tests.
×

Success!

Help @PeterPan_321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...