Nov 24 2011

How to display 360 video in WordPress

I’ve tested my Sony Bloggie MHS-PM5 360 video in WordPress with RyubinPanoPlayer from Ryubin’s Panorama Laboratory and SWFObject 2.

There are several different ways to shoot 360 video, so you will need to research which method is best for you. Ryubin’s Flash Panorama Projection page provides a very comprehensive tutorial about projection that is relevant to shooting, stitching and showing panoramic or omini-directional photographs and motion pictures. You can also find some useful information about Omnidirectional equipment on the Page of Omnidirectional Vision. Ryubin’s Flash Panorama player (RFP player) supports several different types of 360 video and provides a User’s guide for V50 player for each format.

Here is a brief tutoroial using SWFObject 2, XML, MP4 video, and Flash for 360 interactive video display in WordPress.

  1. Read the User’s guide for V50 player
  2. Download the appropriate player sample files from Ryubin’s Panorama Laboratory for your media format
  3. Install and activate WP-SWFObject plugin.
  4. The WP-SWFObject plugin settings can be adjusted to your preferences, but the Flash Player Version must be at least 10 and Allow Script Access must be set to “Yes”.
  5. Refer to the documetation for using the WP-SWFObject plugin shortcode in a post or page with flashvars, which is required with RyubinPanoPlayer.
  6. Create a “pano” (or whatever you want to name it) folder in the wp-content folder of your WordPress installation.
  7. Upload all the files downloaded from Ryubin’s Panorama Laboratory for your media format to the “pano” directory. Do not change the folder names or structure.
  8. Shoot your 360 video.
  9. Use the sample XML file from the Ryubin’s Panorama Laboratory for your media format to create your video specific XML file, and change the URL paths to match your WordPress installation. Make sure the image element is included with the play_objects element:
    <play_objects>
    <image path="http://mysite.com/wp-content/pano/pano_video/[myvideo.mp4]" />
  10. Upload your MP4 video and XML file to the appropriate folders in your “pano” directory.
  11. Create a post or page in WordPress and insert the WP-SWFObject plugin shortcode for your video. An example of the shortcode used for my first test is below for the Bloggie download from Ryubin’s Panorama Laboratory. Change “mydomain.com”, “myvideo.mp4″, and sample.xml to your domain address, video file name, and XML file name. Remember to include the “http://” for your absolute paths, as this was removed to display the sample shortcode below.

[swf]mydomain.com/wp-content/pano/swf/RyubinPanoPlayer5.swf, width, height, internal_ctrl=yes&video_path=mydomain.com/wp-content/pano/pano_video/myvideo.mp4&playmode=bloggievideo&xml_path=mydomain.com/wp-content/pano/xml/sample.xml&cursor_path=http://mydomain.com/wp-content/pano/system_images/my_cursor.png[/swf]

You will need to experiment with the XML file for your video format. I hope that this quick tutorial will give you a head start to display 360 video in your WordPress website.

By Colette Lane • Blog • 2 • Tags: , , ,