Page 1 of 2

[Tutorial] How to convert to html5 from flash

Posted: 04 Feb 2013, 15:05
by chali
Hej

This guide is originally from subsonic forums and from user jValdron and the transcoding string from user mta99
I use google translate as I write this guide, so excuse the grammar.

Everywhere that says _location_ is the location of your jetty folder, for my version of Madsonic under Ubuntu, it's /var/subsonic/jetty/3320/ (3320 could change depending on your version).

1: Download the attached file, unzip it.
Now you should have 3 zip files: external player, rest,and videoplayer.

2:download JWPlayer 6.10: http://www.longtailvideo.com/jw-player/download/

3:Copy the "jwplayer.flash.swf" file to your _location_/webapp/flash with "jw-player-6.10.swf" as the name (rename it)

4Copy the "jwplayer.html5.js" and "jwplayer.js" files to _location_/webapp/script

5:now take videoPlayer.jsp file, and externalPlayer.jsp and replace your files that is located in _location_/webapp/WEB-INF/jsp, overwriting your existing file.

6:Now take the last file (videoPlayer.jsp) FROM THE REST FOLDER and replace your file that is located in _location_/webapp/WEB-INF/jsp/rest

7:Once you got all those files in place, we just need to adjust the transcoding option, so login to Subsonic, go in Settings -> Transcoding, and for the video line, put the following information:

Name: mp4/h264 video
Convert from: avi mpg mpeg mp4 m4v mkv mov wmv ogv divx m2ts
Convert to: webm
Step 1: ffmpeg -ss %o -i %s -async 1 -map 0:0 -map 0:1 -f webm -vcodec libvpx -b %bk -s %wx%h -acodec libvorbis -ar 44100 -ac 2 -preset superfast -threads 4 -v 0 -

Or use the original transcoding from thread:Step 1: ffmpeg -ss %o -t %d -i %s -async 1 -vf lutyuv=y=val*1.3 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f webm -vcodec libvpx -preset superfast -acodec libvorbis -threads 0 -

do a reboot when everything is ready,

when playing movie on a computer, you must click on the (play in new window to get full screen)

/ Chali

Re: How to convert to html5 from flash

Posted: 08 Feb 2013, 02:47
by Madsonic
hi,
in my last Build a add a working HTML5 version. But its as default hidden

To enalbe do so you only rename the HTML5 version to the original filename

\Subsonic\jetty\3340\webapp\WEB-INF\jsp\videoPlayer_HTML5.jsp
to videoPlayer.jsp
\Subsonic\jetty\3340\webapp\WEB-INF\jsp\externalPlayer_HTML5.jsp to externalPlayer.jsp
\Subsonic\jetty\3340\webapp\WEB-INF\jsp\rest\videoPlayer_HTML5.jsp to videoPlayer.jsp

Dont forget the transcoding

Code: Select all

Name: mp4/h264 video
Convert from: avi mpg mpeg mp4 m4v mkv mov wmv ogv divx m2ts
Convert to: webm

Code: Select all

ffmpeg -ss %o -t %d -i %s -async 1 -vf lutyuv=y=val*1.3 -b %bk -s %wx%h -ar 44100 -ac 2 -v 0 -f webm -vcodec libvpx -preset superfast -acodec libvorbis -threads 0 -
and as least, check the player for activated tran-coding setting

restart Madsonic Service and try again

best regards

Re: How to convert to html5 from flash

Posted: 23 Feb 2013, 18:32
by Skinjob
These instructions seem specific to video. Is there anything else you have to do to get it to to get it work with audio? I was hoping to get audio working in chrome on android.

Re: How to convert to html5 from flash

Posted: 12 Mar 2013, 10:06
by Ghizmo
+1
I'm really interesting by HTML5 audio fonction... If anybody have an idea about, this will be great !

Re: How to convert to html5 from flash

Posted: 14 Mar 2013, 00:30
by chali
This is already built in mini player, is also available as app in chrome. (it's called minisub)
just turn it on in madsonic :D

/ Chali
Skinjob wrote:These instructions seem specific to video. Is there anything else you have to do to get it to to get it work with audio? I was hoping to get audio working in chrome on android.

Re: How to convert to html5 from flash

Posted: 14 Mar 2013, 00:30
by chali
This is already built-in mini player, is also available as app in chrome. (it's called minisub)
just turn it on in madsonic

/ Chali
Ghizmo wrote:+1
I'm really interesting by HTML5 audio fonction... If anybody have an idea about, this will be great !

Re: How to convert to html5 from flash

Posted: 15 Mar 2013, 02:11
by vbguy2011
Restarting service / Killing agent and service and reloading doesn't appear to work on Windows.

Are the files to be changed actually located in the installation older (C:\Subsonic being default install path), or is there an application folder from which the settings files/scripts are read/booted?

I've deleted the jw-players from the C:\Subsonic just to test, and the server still streams just fine....????

please assist.
cheers

Re: How to convert to html5 from flash

Posted: 15 Mar 2013, 14:33
by Ghizmo
Thanks Chali but i don't want to use minisub ! I would use Madsonic web interface.

Re: How to convert to html5 from flash

Posted: 19 Mar 2013, 06:47
by nh5
Haven't had any luck with this tutorial, however I'm extremely interested in getting this to function on my server. Flash has overstayed its welcome. I've followed the instructions step by step however I end up with a error in JWPlayer6, "error playing file" anyone see this issue at all?

Re: How to convert to html5 from flash

Posted: 01 Apr 2013, 14:29
by chali
Hi

you have to use Chrome or another browser that supports html5, (firefox does not support html5 on the windows desktop (html5 only works fore mobile firefox on phones)

if it does not work directly, open player.jsp and change the line autoPlay to false, then save, open again and change it back to true and save. (Do not forget to subsonic / madsonic ned to be shut down when you do this)
(I usually get to do this every time)

another tip is that you do not replace the external player. jsp
then you will not lose support for isub and subsonictv.

so only replace rest (player.jsp) and player.jsp (When you get html5 on computer and phone)

the only downside to this is that boxeebox have problems with windows in html5.
However now will all USB computers (android usb stick) work well.
mk808 etc.

I have had problems with transcoding, I have not been able to turn it off. My solution to this problem is as follows.

delete all the transcoding (not hls and downsample) then add
Than add the above transcoding (first post)

for MP4 (webm) but have the standard box, not clickt

Now it will be so that you will get the file in the original format, and if you are away and need transcoding again, just click in it for the player (eg for madsonic app, etc.).


in terms of music, I see no personal reason to use html5 for it as there is no direct load using music files in Flash.

hope this helps you / Chali

nh5 wrote:Haven't had any luck with this tutorial, however I'm extremely interested in getting this to function on my server. Flash has overstayed its welcome. I've followed the instructions step by step however I end up with a error in JWPlayer6, "error playing file" anyone see this issue at all?

Re: How to convert to html5 from flash

Posted: 04 Apr 2013, 01:01
by chali
Ghizmo wrote:Thanks Chali but i don't want to use minisub ! I would use Madsonic web interface.

hello again,
after thinking about your problem with music for a while, I remembered that it is perfectly possible to play music on my ipad on my website (in the browser) is that what you mean?, it works well to do. (it does not use Flash)

/ Chali

Re: How to convert to html5 from flash

Posted: 09 Apr 2013, 23:32
by Skinjob
chali wrote: hello again,
after thinking about your problem with music for a while, I remembered that it is perfectly possible to play music on my ipad on my website (in the browser) is that what you mean?, it works well to do. (it does not use Flash)
I must be missing a step or something. I've renamed the files and restarted the service as described in Madevil's post at the top of the thread, but I can't get audio playback on Android in Chrome, Dolphin Beta or the browser that comes with my Asus Transformer TF300 (Android 4.2.1). I can't tell any difference after renaming the files. In all cases the player doesn't work, and depending on the browser it's either not visible or only some buttons are visible, which is exactly how it behaves before renaming the files.

I know I can use MiniSub, but the web interface is so much better. It would be really nice to get it working.

Re: How to convert to html5 from flash

Posted: 13 Apr 2013, 02:28
by Avatas
Hello all,

I'm having trouble playing videos using chrome on an ipad. Android, Mac OSX and Windows PC devices work flawlessly. It appears as though chrome on the ipad doesn't even start the jwplayer. I end up with the message "error loading player: No playable sources found". Jwplayer functions correctly from the longtail video page so I can only assume it is either my transcode settings or the OS. I would appreciate any suggestions.

My current transcode settings: ffmpeg -ss %o -i %s -async 1 -map 0:0 -map 0:1 -f webm -vcodec libvpx -b %bk -s %wx%h -acodec libvorbis -ar 44100 -ac 2 -preset superfast -threads 4 -v 0 -

Thanks!

Re: How to convert to html5 from flash

Posted: 13 Apr 2013, 12:16
by chali
Skinjob wrote:
chali wrote: hello again,
after thinking about your problem with music for a while, I remembered that it is perfectly possible to play music on my ipad on my website (in the browser) is that what you mean?, it works well to do. (it does not use Flash)
I must be missing a step or something. I've renamed the files and restarted the service as described in Madevil's post at the top of the thread, but I can't get audio playback on Android in Chrome, Dolphin Beta or the browser that comes with my Asus Transformer TF300 (Android 4.2.1). I can't tell any difference after renaming the files. In all cases the player doesn't work, and depending on the browser it's either not visible or only some buttons are visible, which is exactly how it behaves before renaming the files.

I know I can use MiniSub, but the web interface is so much better. It would be really nice to get it working.
Hi

have you tried to do as I write higher up in the thread?
open player. jsp with the tex editor and change any of the text, save and then change it back and save again. (I have to do this every time I update)

music works great in firefox, chrome + all the apps I tested.

How have you done with transcoding? do you still have mp3 for music or have you removed it? You must have left mp3 for music.

/ Chali

Re: How to convert to html5 from flash

Posted: 16 Apr 2013, 17:20
by Skinjob
chali wrote:have you tried to do as I write higher up in the thread?
open player. jsp with the tex editor and change any of the text, save and then change it back and save again. (I have to do this every time I update)

music works great in firefox, chrome + all the apps I tested.

How have you done with transcoding? do you still have mp3 for music or have you removed it? You must have left mp3 for music.
By "player. jsp" you mean videoPlayer.jsp, right? I stopped MS, edited videoPlayer.jsp in both jsp and rest and saved them. Then I edited and saved them again back to the original values. I restared MS and it still looks the same. On the computer, browsers still show the flash player and on android it's still broken.

I'm using MP3 for transcoding, but I also tried Ogg Vorbis out of curiosity and it didn't make any difference.

It seems like no matter what it's still trying to use the flash player on andriod. What does it look like on your screen before you start playback? Can you see the player or does it only show up when playback starts? For me the player is never visible in android, so I'm assuming that means it's trying to use flash.

Thanks for trying to help with this.

Re: How to convert to html5 from flash

Posted: 19 Apr 2013, 00:04
by chali
...

Re: How to convert to html5 from flash

Posted: 19 Apr 2013, 00:08
by chali
Avatas wrote:Hello all,

I'm having trouble playing videos using chrome on an ipad. Android, Mac OSX and Windows PC devices work flawlessly. It appears as though chrome on the ipad doesn't even start the jwplayer. I end up with the message "error loading player: No playable sources found". Jwplayer functions correctly from the longtail video page so I can only assume it is either my transcode settings or the OS. I would appreciate any suggestions.

My current transcode settings: ffmpeg -ss %o -i %s -async 1 -map 0:0 -map 0:1 -f webm -vcodec libvpx -b %bk -s %wx%h -acodec libvorbis -ar 44100 -ac 2 -preset superfast -threads 4 -v 0 -

Thanks!

Hi

U Ned to use isub on iPad/iPhone to play video ,
It won't work to play video direct to a iPad only music

/chali

Re: How to convert to html5 from flash

Posted: 19 Apr 2013, 00:10
by chali
Skinjob wrote:
chali wrote:have you tried to do as I write higher up in the thread?
open player. jsp with the tex editor and change any of the text, save and then change it back and save again. (I have to do this every time I update)

music works great in firefox, chrome + all the apps I tested.

How have you done with transcoding? do you still have mp3 for music or have you removed it? You must have left mp3 for music.
By "player. jsp" you mean videoPlayer.jsp, right? I stopped MS, edited videoPlayer.jsp in both jsp and rest and saved them. Then I edited and saved them again back to the original values. I restared MS and it still looks the same. On the computer, browsers still show the flash player and on android it's still broken.

I'm using MP3 for transcoding, but I also tried Ogg Vorbis out of curiosity and it didn't make any difference.

It seems like no matter what it's still trying to use the flash player on andriod. What does it look like on your screen before you start playback? Can you see the player or does it only show up when playback starts? For me the player is never visible in android, so I'm assuming that means it's trying to use flash.

Thanks for trying to help with this.

Hi

I have sent you a pm including a address and login info
So you can test.

Lett me know if this is what you would like, and I can try to help you.

Edit, I think you need to use the android app for music on android phones/pads. (Not shore)
But iPhone/iPad can play the sound direckt in html5. ( I think it's has to do whed rights )
I think You nede QuickTime player in the browser.

/Chali

Re: How to convert to html5 from flash

Posted: 19 Apr 2013, 15:54
by Skinjob
chali wrote: I have sent you a pm including a address and login info
So you can test.

Lett me know if this is what you would like, and I can try to help you.

Edit, I think you need to use the android app for music on android phones/pads. (Not shore)
But iPhone/iPad can play the sound direckt in html5. ( I think it's has to do whed rights )
I think You nede QuickTime player in the browser.
Thanks for letting me try your site. So I'm not going crazy. It seems like audio playback unconditionally uses the flash player (or maybe QuickTime on mac). Only video is using the HTML5 player. Video works fine in HTML5 on both Android (Chrome, Dolphin) and Windows (Chrome, Firefox). Audio playback is broken in Android browsers (no player loaded at all) and always uses flash on Windows browsers.

The Android browsers fully support HTML5 audio, so that's not the issue. I guess Madevil still has some work to do to implement HTML5 audio playback. I'll just have to be patient and I'm sure he'll get to it.

Thanks again for all your help.

Re: How to convert to html5 from flash

Posted: 22 Apr 2013, 06:05
by Fenny
Well, I did a good chunk of the work on the initial html5ing for video. The issue with making the site use html5 for audio is the way that playlists are generated. However, because of the way I set up the external player, (madevil's code is all but identical), if you share the music that you would like to listen to and then open the share link in the iOS browser it will play in html5. This shows that the player will play the music. The issue is with the way that the javascript loads files into the playlist. With html5 it wants the playlist loaded before the player will play. I would have to rewrite a whole bunch of scripting to make the player load, and play in html5, particularly on the fly.