The Video Player

From Car and Driving
Jump to: navigation, search

When Searching the Webservice, you will usually get results back with a video included.

Look for a section in the result like this:

<video_urlforiframe>http://www.caranddriving.com/cdwebsite/player.aspx?w=450&id=10312&cid=demo</video_urlforiframe>

Important: When using videos, it is important that you use the video_urlforiframe element and paint that in an iframe, and *not* the contents of the hdvideo element. Direct access to the mp4 files is provided for those that want to implement Google SEO on the video content only, and is not intended for direct use.

You can embed this video in your page by using a line in your website like this:

<iframe id="cdvideo" src="http://www.caranddriving.com/cdwebsite/player.aspx?w=580&id=10312&cid=demo" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="middle" width="580" height="376" allowfullscreen></iframe>

By altering the URL of the video, the player can be customised. The following querystring arguments to player.jsp are supported:

  • id = review id for the video
  • w = width of player. It scales the height keeping the aspect of: 720 x 405 constant + approx 63 pixels for the button area. If responsive=true, this parameter is ignored.
  • films - full/short/fullshort/shortfull. Often, and usually for our latest film, we have a full 7 section film available, and also a short 5 minute long summary film that the video player can switch between if you press the full/short button on the player toolbar. The full video plays by default, and the short button (if available) allows you to switch to the short video. You can change that behaviour; setting 'films' to shortfull plays the short film by default, and gives a button to switch to the full video. Setting it to full plays the full film, but hides the short film button. Setting it to short plays the short film (assuming one is available) and disables the button to switch to the full video. If no short film is available, this option does nothing - it simply plays the full film.
  • autostart = Auto start parameter, true or false. If the value is not equal to true we assume its false, and the video does not autostart. If no parameter is supplied, then it defaults to true. Note that autostart doesn't work for iOS devices - iphones; ipads; ipods etc - so autostart will always be false on these devices, regardless of what you set this parameter to. This is because of a limitation built-in to iOS by Apple to conserve bandwidth.
  • responsive = true forces the video player into full width, responsive mode - it will automatically resize as the space it has on a webpage grows and shrinks (this is most useful on tablet devices which can be rotated). The video is played in 16x9 format. In addition, any small border around the video is removed (there is a 8 pixel border on the standard video player), and replaces the chapter buttons under the video with chapter markers (white dots) on the video progress bar - note that these chapter markers may or may not display on the progress bar of a mobile device, depending on the implementation of the mobile operating system by the device manufacturer. Responsive mode causes the width parameter to be ignored. For more information, see Responsive Videos.
  • css_url = URL for a custom CSS file to chage colours/fonts etc of the chapter buttons. There's an example file here: http://www.caranddriving.com/new/css/playerstyle_custom.css. which only has a few style options, the other style parameters are inherited from our default styles. This means that you can just set the selection colour easily and leave everything else the same, or if they would prefer, change all the CSS styles.
  • logo_url = URL for an image to show as a watermark in the top left of the player, now defaults to C&D logo. These logos show for 6 seconds and then disappear to not disrupt the video. It's best to supply a PNG with transparency as done here: http://www.caranddriving.com/new/images/logo_trans.png
  • preview_url = URL for an image to show as a preview if autostart is disabled. Not used if autostart is enabled. For example:
 Show a different preview image: http://www.caranddriving.com/cdwebsite/player.aspx?id=8770&autostart=false&preview_url=http://f8.caranddriving.com/videos/thumbs/new_volvov60_2011.jpg 
 Show the default preview image: http://www.caranddriving.com/cdwebsite/player.aspx?id=8770&autostart=false
 Autostart (no preview images shown): http://www.caranddriving.com/cdwebsite/player.aspx?id=8770
  • bitrate = force the player to display a specific bitrate and not a bitrate selected by the speed of the users connection. Accepts: 200, 700 and 2000. Again, you probably won't want to change this, but if you're building it into a mobile app for example, you'd probably set the bitrate to 200 to keep the bandwidth down to a minimum. 2000 is the HD feed.
  • manwidth = true if the buttons are not to be automatically resized. Defaults to false.
  • statme = this can be ignored.
  • cid = this is a unique video identifier given to each customer (note: it is not the same as the User ID). Please do not change it, or reporting metrics will not be captured correctly.
  • section_names = short to replace button text with shortened versions good for players < 375px wide.
  • sample = true to display a demo version of the video (shows all the first and last sections, and 30 seconds of each of the others). For C&D demo use only.
  • vanilla_css - use when providing your own css via css_url; if set to true this suppresses loading of the default css file; otherwise the default css file and the custom css are both loaded one after the other (so the custom css overrides the default one). We recommend leaving this off unless there is very good reason.
  • skin_zip_url [DEPRECATED] = URL for a custom player skin (zip) to change how the player itself appears (the play button, progress bars, etc), eg. http://www.longtailvideo.com/files/skins/glow/5/glow.zip - this option should no longer be used, and will stop working completely soon when we move to allowing the controls to be styled by CSS.
Personal tools