Technology at Geneseo Community School District 228
Hello, here is how I like to publish Podcasts or videos onto a website running a wordpress engine. This process has changed a bit since now all modern browsers can play MP4 (M4V) content directly without any plugins. Also with recent versions of WordPress the built in player handles the native playback of MP4 perfectly and no plugins are really needed.
Okay, so lets say I made a video on a Mac and saved it with Quicktime. Chances are this video will be saved with an extension .mov. Okay the problem with .mov is that they are huge and are terrible for publishing to the web. Using quicktime you could export the video as a MP4 but I have found that it’s compression settings are not ideal and still leave the video large.
Okay so with a saved podcast in the .mov format. I first convert it to MP4 using a program called Handbrake.
Okay so take a look at this mov clip.
Notice the file is 221 megs for a movie that is only 3 minutes and 7 seconds long.
Okay so lets take this .MOV file and now load it into Handbrake.
Okay with program open I select my .MOV file and now hit the button TOGGLE PRESETS so that I can choose iPad from the list. Really this format is perfect for the web and you can ignore all other settings on this program. It may look a bit confusing but really that is it. Pick your file hit iPad (or can choose Android) then hit START, I am saving my file to the Desktop and will have a new file that ends with .MP4.
Note: If you choose iPad or iPhone or Android your video will still be playable on all devices, including iphones and android phones and computers. The MP4 format is universal with modern internet devices and will play on just about anything.
Okay when it is all done lets compare the sizes.
So the file was 211 megs before and now is:
15.9 megs. Yes that is correct more then 10 times smaller. This means it will load almost 10 times faster and if you want multiple people to view your site and watch your podcast at the same time it will work way better. If you have ever uploaded a video to youtube you will notice that before you can view it, you will see a message about youtube processing the video. What are they doing? You guessed it they are using a converter and compressing it to mp4 so that the video will play on all devices, will be small and load quickly.
If you follow my method above you will do be doing the same thing and avoiding the advertising nightmare land which youtube has unfortunately become.
Okay so now to embed the video.
Just Go to your website, edit a post or page and then click on ADD MEDIA.
Choose your MP4 file you converted with Handbrake and Upload.
Now simply choose Embed with Media Player (built in)
Thats it, here is my final product. The file will auto embed and be playable, if it cannot be playable on a device directly it will auto detect and the link will say download. In this case click download and the video will still play. If you are using Chrome, Firefox or Safari you should be able to play the file directly on the website. Try this post on a smartphone and you will see the video loads as well .. and quickly
One problem when uploading videos online is the problem with needing plugins, players, codecs etc for them to play. Also some browsers behave differently and handle video differently. For example Chrome will play a h264/mp4 file natively in the browser, where as Firefox as of version 27 will not and will instead download the file. Some browsers and configurations will prompt users about missing plugins / etc.
This just translates to frustration on the audience side of things who may be using a phone, tablet, laptop, or who knows what device.
I have the found the easiest way to show and embed a video is to the use the JW Player plugin. Here is a quick video on using installing and using this plugin to upload video. This player creates a youtube like player in the website itself making it really easy for a visitor to watch.
In a nutshell after plugin is installed, upload a movie then click Insert with JW Player.
There are multiple ways to use YouTube. You can subscribe to channels you can comment and join the YouTube community or if you are like the me you may just want to watch the video. This applies to schools and educational settings where teachers and students find value in watching certain videos but do not need comments or suggestions for other videos / in fact these things actually distract and more importantly slow things down. The fix for this has been created by Google itself and is called YouTube Feather.
Click here to Access Google Feather and check the box to participate in the Beta Youtube Feather
Feather works by removing google + integration, removing comment section, removing suggested videos, and by defaulting to playing mid level video quality based on network connection. It also minimizes advertising – overall it returns to the simplicity and core of what makes YouTube great.
Again Feather is great for use in Educational settings where users post inappropriate comments or where suggested videos that pull up with the content are off topic or just simply inappropriate. Lets hope Google does not kill this beta and keeps it going.
I spoke with a Chemistry teacher at the High School Today who wanted a simply way for students to submit assignments to them but did not want to use email. I looked at a few PHP scripts for a simply upload but then ran across a simply widget that does the job nicely. Its called Upload Widget, pretty straightforward.
Now on the teachers machine I create a shortcut to this same location but logged in with full admin privileges. This way the teacher clicks the shortcut link on their laptop and can drag and drop files and delete, organize move to there own desktop.
Thought I would share this because this method actually works well and is end product pretty slick and easy from both Teacher and Student perspective. Student just clicks on your website and hits upload and they are done. Students cannot view the upload or see other uploads so you have built in protection from anyone looking to “borrow” another students assignment.
There is a little bit of background work on the web server but only about 5-15 minutes setup time . I am hosting these sites on Linux and have created the dropbox subfolder as a samba share to enable teacher full access via a login. This allows the teacher to have a simply desktop shortcut on a Linux/Mac/ or PC machine that gets them to the Drop location with full admin access. You could use NFS, AFP, Webdav really just about whatever sharing protocol you want I just went with samba because the teacher had both a PC Laptop and Mac Desktop.
Maybe another way to make a teacher website more functional / Easy way for student to submit an assignment from school or home from a variety of devices.
You can download the widget here (zip): upload-widget
This summer I migrated two servers to Linux based platforms running on Dell PowerEdge R210’s. Previously a G5 Xserve was running our mail server for the last 7 years and it has done a great job. Kerio no longer supports the PPC based architecture meaning no more software updates. In addition the age of the machine itself in terms of hardware meant ready for a change. Kerio now has a true 64 bit version of their software and supports Linux natively.
Kerio Running On Ubuntu 64bit
The migration process was smooth although time consuming, with over 400 active email accounts and 300 gigs of information simply copying the info took well over 5 hours. The configuration files are for the most part interchangeable and could simply copy from old server to the new with just some minor changes to file paths. Mac uses /usr/local/kerio and Linux uses /opt/kerio.
The new version of Kerio supports jabber protocol and would like to enable this having the server handle all instant messaging, video chats and email.
In a similar move I setup another server which hosts all staff websites and it running latest version of Apache, PHP. The Windows server that these sites were previously on was 32 bit based and was starting to max out the RAM limit of 3.5Gigs. PAE extension was possible but simply running on a dedicated 64 bit server with less overhead seemed a better path. Moving the information was pretty slick in this case as well (200 gigs of website data, 70 websites). The only trouble here was correcting URL pathnames to case sensitivity (Windows not case sensitive, all flavors of Linux are case sensitive).
Both Servers are R210 Dell PowerEdge running a RAID 1 configuration with Western Digital SE4 drives. Plan to continue to reduce the number of Microsoft based servers with Linux.
The iBooks Author applicaton saves and exports its finished products as an .iBooks file. By default Apache and IIS do not allow the MIME type .ibooks or really any really any form of ebook besides .pdf by default. The ibook format is a slight variation of .epub format but with some custom DRM restrictions and Apple platform lock-in measures. To allow WordPress sites to add both .epub and .ibooks formats directly to a webpage you must set the mime type in either the Apache configuration or by using a WordPress plugin.
Using the PJW Mime Config plugin for Wordpess is a very easy way to quickly add new mime file types.
You can download the Plugin Here pjw-mime-config.1.00
Or you can simply login to the admin portion of WordPress, click on Plugins, click on Add new and search for PJW Mime Config.
After installing the Plugin simply make sure it is ativated then click on Settings | and choose Mime types.
Now simply add the correct file extension for the file types you want to be able to upload and host.
For example ibooks you could use:
File Extension: .ibooksMIME type: video/ibooks
For epub you could use:
File Extension: .ibooks
Mime type: video/epub
Example for ibooks
Thats it, after you hit add mime type you can now upload files with this extension and not get a security warning.
If you are interested in MIME (Multipurpose Internet Mail Extensions) types take a quick look here.
WPTouch is a great wordpress plugin to add instant mobile phone / touch formatting to any wordpress based site. The latest free version of the plugin is 1.9.6 is outstanding and only missing a few options that allow for greater customization. One option is the ability to remove the mobile site on | off toggle attached to the footer section of each mobile formatted page. If you are a big fan of the plugin and do not like editing code simply purchase the the Pro plugin which provides this option under settings, the pro version can be purchased from http://www.bravenewcode.com/product/wptouch-pro/. If you are happy with the free version and are a bit more tech savy you can edit the footer.php file that is located within the plugins directory.
In most cases this will be site installation/plugins/wptouch/themes/default/footer.php
If you edit this file you will see a section that looks like this:
To remove the section with the Mobile Site on | off toggle simply delete this highlighted section. Be aware that if you update this plugin it is quite likely that this file will also be updated and this seciton of code will be returned.
The free version of this plugin can be found here. http://wordpress.org/extend/plugins/wptouch/
I have also attached a custom modified version of the plugin which has the mobile toggle switch removed already. WPTouch No Mobile On | Off Toggle.
Here are some handy capture Video and Audio tools that allow you to save and embed content from the web. Additionally I have placed some other handy add-on’s and tools that make for a better web surfing experience.
Goals of this Post:
1. Learn how and why to manipulate and save video from the Web.
2. Learn how and why to convert video from various video codecs for playback on mobile devices.
3. Learn how to extract audio tracks from Video files on youtube.
4. Learn how to add plugins to Firefox that allow customizations and more features.
5. Learn how to embed video as a link on a WordPress Page.
6. Learn how to embed Video directly and have it play natively in a WordPress based page.
Get Latest Version of Firefox and Other Useful Apps
To Start lets pick the browser that allows the most customizations – Mozilla Firefox. (Chrome or Chromium would be a close second).
HandBrake – best Overall Video to iOS Converter for Mac (Great Converter for other things as well)
VLC (VideoLAN) – Best Overall Video Player for all Computers Period.
Here is a quick Podcast tutorial on how to install
(Click Here to Download or Watch Below)
Add Plugins to Firefox
With the latest version of Firefox installed now lets add a couple of basic plugins that will make overall surfing the web better/ faster.
This is a great plugin as it simply is designed to try and remove/block advertisements from as many websites as possible. In terms of both network flow and user enjoyment advertisements waste both bandwidth and time. With more and more people connecting to the web it has evolved since the early 90’s and now is heavily inundated with adds and at times can resemble TV. Not a perfect plugin but overall helps things run smoother and web pages are slightly less annoying with ads.
This is my favorite video download plugin. What it does is extract the source file from as many video based sites as possible allowing you to save the video file locally. Site works well on youtube and many other popular video hosting sites. Look youtube is great, easy to use, easy to upload but in the last year or two has taken a couple steps closer to TVness. Notice the number of advertisements in the form of 30 second commercials and banners across the bottom, yes believe it or not there was a time when youtube did not have ads. Now with the help of Adblock Plus and Video Download helper you can quickly download a video and save it, allowing you to play it back to your class or embed in your own website advertisment free :).
Using Download Video Helper
Here is a screenshot of me using Video Download Helper to download a YouTube Video. Notice where I have put a little red circle, if you see the little triangle next to the floating balls symbol this is where you can save the video. When the three colored balls are lit up and rotating this means that video download helper has found video it can extract. If the three balls are grey and not moving, Video Download helper is unable to access the video source.
In the example below notice there are lots of different options to choose from. You will see 240p flp, 360 flp, something.3gp, etc. The rule of thumb here is always get the MP4 Version if it is available. Apple and Apple Products (iPad, iPhone) like MP4. You can see in my screenshot I have selected the MP4 option and can now DOWNLOAD and save where I want.
Okay so lets say that you have done this but none of the optoins let you save the file as MP4. You are not out of luck here you just now need to do an extra step and convert the video to MP4. You will want to convert the Video to MP4 if you want visitors to be able to view your video on an iPad, iPhone, iPod, etc. If your audience is using a full computer this is uncessary.
Converting Video to MP4
Okay again let me cover the why this is something you may want to do. MP4 is a video container and codec that Apple uses and this format can be played on iPad, iPhones, iPods, Computers you name it. The FLV format is flashed based and can only be played by devices that have flash installed – there is no flash on ios devices.
Video download has a built in converter but I have found that it does not really work that well with FFMpeg installed. So instead to convert I recommend using Handbrake.
With VLC and Handbrake installed – Handbrake can convert videos into formats that are easily playable on the ipad. For example I will download a FLV video off of youtube and then convert with Handbrake to MP4 (iPhone Optimized). Here is a quick podcast on doing a conversion with Handbrake.
Click Here to Download Podcast or Watch Below
Converting YouTube to MP3 Audio Files
Often users find it useful to create a quick audio file from a youtube video. This process is quite easy thanks to a useful site called youtube-mp3.org . Process is easy to do you simply copy and paste a youtube URL into the youtube-mp3.org box and hit convert.
Embedding into WordPress using the Embed-Width Plugin
If you would like to make it so someone visiting your website can view the video natively on iPads, iPhones, iPods, Android Based, PC or Mac directly on your website itself you can using a plugin called Embed Width. There are actually a few plugins and methods in which you can do this but this one seems to work well and have tested it out on iOS and Android devices.
Here is a screenshot viewing this site from an iPhone notice the videos can be easily played and viewed.
To do this takes a bit more effort so I have placed this final podcast at the bottom of the post. So lets say you have a video you have saved from the internet and converted to mp4 and now want to embed to play natively in the web browser. Watch the Podcast Below to show how I embed a video using the Embed-Width plugin.
Other Ways to Embed – HTML 5 Method & Podcast Producer
If you utilize the Untangle Filter distribution and run into problems connecting to a self hosted WordPress site via the IOS App WordPress such as Invalid Data then here is the fix. The problem is caused by the Intrusion Prevention Module. If you open this modules settings and locate Rule 3827 usually found on page 96,97,98 or 99, you need to simply uncheck the block option.
Error may look something like this, can appear when you are syncing content or when you are trying to setup the app initially.
That is it, I have found some users turn off the entire intrusion prevention module to get the app to work but overall just disabling the one rule is preferable as the module itself provides excellent protection for you network.
WordPress is an excellent open source web publishing platform. One question I have been asked is why not simply sign up for a free wordpress website at wordpress.com rather then use a self hosted one. The main reasons: cost and features. WordPress.com will provide a free website (like other web publishing services) but restricts many of the features unless you purchase a pro account. The pro upgrade allows you to embed video, have more storage space, better network bandwidth, access and install more plugins, tweak PHP, remove advertisements and more. The catch here is a Pro account on WordPress.com is 99$ a year per site, so lets say at around 60 sites we are looking at around a 6,000$ yearly fee to maintain this number of websites.
On the self-hosted side: We purchased a PC server five years ago for under 3,000$. This server hosts over 60 sites, has not restrictions on the number of sites can install, no upload limits, no cloud storage restrictions, users have full access to install any and all themes, plugins, modifications, can embed video etc. Sites can be brought online or taken offline easily and no worries about registration, transferring account ownership or anything. Additionally the majority of teachers actually make use of their site on-site and off-site, when having an entire class visit a teachers website during the school day inside of the LAN , loading time is minimized and little WAN bandwidth is used. This keeps network traffic moving quickly and efficiently if you have a few classes of 25 visiting a teachers website via a WI-FI connection on an Ipad during the school day. You end up with quicker load times for students and teachers have extremely faster document, video and photo upload times.
If you were a private professional blogger/writer having a PRO account may make sense, one would have to spend little setup time to get full access to a great website publishing platform. In situations where you will be hosting multiple websites – utilizing your own web-server just makes sense, self hosted is Faster & Cheaper.
WordPress.com Pro Accounts (http://en.wordpress.com/products/) Click on Images and can see price per blog to increase storage space, add video features, removes ads, etc.
Or simply download WordPress for Free and remove storage space barriers and all restrictions.