Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

Friday, January 28, 2011

Embedding JPlayer in Blogger using an iFrame

This is mostly a demo to show that a JPlayer implementation can be used in blogger using iFrames. It can probably be done a more eloquent way by editing the template, including the proper js (jquery) and linking to the proper stylesheets, then putting the HTML in the post...but this way only took a few minutes and should serve its purpose:

...the following code is used

<iframe src="http://chapmanit.thruhere.net/nick/_test/?name=nick&makesparse=true" marginwidth="0" marginheight="0" frameborder="no" scrolling="auto" style="width: 500px; height: 400px; /*border: 1px dashed #333; background:#FFF;*/"> <br /></iframe>


jPlayer in an iFrame Demo




Related:
jPlayer Playlister (from folder contents)
ZINA extended with jPlayer

Wednesday, September 8, 2010

JPlayer Audio Playlist Generator (JPlayer Playlister)

The CD that launched 1000...lines of code

Update

[2014.11.23]
The new jPlaylister v0.70 was built on jPlayer 2.8.2, because 2.6 had some recent serious issues with mobile browsers. Fixing those and implementing a more mobile friendly theme for the fs/mobile mode.

[2014.08.31]
The new jPlaylister v0.68 adds support for auto-scrolling playlists and full-screen/mobile mode. Previous releases added playlist caching (a feature that significantly decreases load times on large playlists) and support for displaying album art, in case you missed them.

/update...resume original post

My brother sent me a CD full of MP3s when I was in Kuwait -- cut off from the internet -- and going into withdrawals from not being able to download music. It was a good mix and has turned me on to a few artists that I knew nothing about.

A week ago, my wife has to take my car for something and, realizing that my radio sucks (shhh...i didn't hook up the antennae so my radio-listening experience would be less than inviting), flipped down my sunvisor CD holder and picked the fabled blue cd from the small selection. She made it 20 tracks or so into the CD (love MP3 CDs..if only it had any type of anti-skip) before arriving home and not using my car again for as long as she lives if it was up to her.

I hop in the car the next morning and A Tribe Called Quest welcomes me to the drive to work. A nice way to start the day. I re-affirm my love for my wife due solely to this incident and decide to facebook about it later that day. I did (may have been the following day) and that was that, but someone mentioned that hearing the mix would be fun. All to eager to oblige, I start devising ways to make it happen. So what if I spend 30 hours on a project and only 2 people give a crap (me and me). I had made web pages that incorporated flash based audio players before...but that was before the up and coming HTML5, and the somewhat supported audio tag.

Let's get a web player

A quick internet search later and I see JPlayer, which looks familiar. I glance at the demos and one has a playlist -- perfect. It supports OGG Audio and MP3's via HTML5 and will fallback to Flash for unsupportive browsers, bras, or family members. Perfect.

Initial implementation (derived from the JPlayer with playlist demo) wasn't that bad. I took the demo code and just added the ability to automatically generate a playlist from all the files in a given location. I think it took me a couple of hours...taking snack breaks and probably food breaks and almost certainly bathroom, crying baby, and phlebotomy breaks.

I went to bed last night with a working player. In addition to deriving the playlist from the files at the location specified, I was also able to add the option of displaying filenames or ID3 information (via getID3 -- a PHP class)

I put a link on fb and probably got thousands of views.

Revisions / Additions

Tonight, I pushed back the list of things I need to do and worked more on this little project. At some point during the day, I had decided that the first song on the playlist was wearing on me. I usually paused within 5 seconds of loading the page, but it doesn't take much to wear a song out, for me. That's another reason I don't do the radio...20 songs on a loop with advertisements and lame DJs. No thanks. So I added the option to 'randomize' list via a clickable link on the page. It caused me to rewrite a fair amount of code. But, I am pretty happy with the turnout.

Current Situation

See 'Update' at the top of this article to link to the current version of JPlaylister. Thanks for your interest and support.

Tuesday, May 18, 2010

Extract Ogg (ogv) from Matroska (mkv)

The Story

I don't do much with video. I finally wrote a script which compresses all the files in a given folder using the handbrake cli...just for archiving my home videos that had been digitized; on import they were some slight compression avi. The cli lets me automate converting my videos to a patent free (afaik) format -- Ogg. I use both Theora and Vorbis in a Matroska container...I was going Ogg (Ogv) container, but handbrake didn't support that, and I hear Matroska is better...or far more capable. Even though Ogv would have been fine for my purposes. Oh well.

Anyway, I decide that I want to make a webpage on my development server (read: home computer) that allows my home videos to be seen by my family without the hassle of uploading them to youtube...and carefully optimizing them first or watchmaking Youtube butcher the already mediocre quality. I decided to embrace the future and use the upcoming html5's 'video' tag.

Ah, man...I JUST encoded/archived all my videos to Matroska...even though they were encoded with Theora/Vorbis, the Matroska container doesn't work. I need to extract (I don't want to transcode them and lose all that quality. are you kidding?) the streams from the Matroska format and put them in an Ogg (ogv) container...somehow. Can't be hard, right?

I tried loads of things. MKVToolnix, AVIMux GUI, VirtualDubMod...and I read loads of forums, mostly about people wanting to convert MKV (h.264) to AVI (xvid). I finally read something about ffmpeg...so I thought I could at least (since I encode to the original size AND to a half-size) transcode from the large .mkv to .ogv with that.

20 minutes into it, my Ogg (.ogv) files were looking horrible and coming out at half the size of the (same resolution) input, I did a few searches for optimal settings .ogv or something and came across a post that mentioned something I hadn't seen in the documentation (although I'd imagine it's there)...the ability to 'copy' the audio and video stream. Someone was just using ffmpeg to extract a 1 minute segment from a video file without re-encoding. That's what I want to do!!!

Long story short, this code did it for me:

The Code

ffmpeg -i mysourcevideo.mkv -vcodec copy -acodec copy myoutvideo.ogv

A straight 'Direct Stream Copy' (i used to use VirtualDub -- pardon me), essentially...with no loss in quality and a container change. Now I can make a quick script...I'm not sure if I'll do it for all my videos or just the half-sizes...as I don't really wanna stream the large ones, which I make available for download.

Be End.

Software


ffmpeg

Epilogue


Now I'm just wondering if Handbrake CLI has any advantage (for my use, anyway) over ffmpeg?