Video Playback Template

Also known as the details page, this template is a landing page for playback of a video. The get_absolute_url attribute of the item object is the URL for the video playback page of that item. The video playback page contains the actual video player that plays the video. In addition, this template usually contains a title and description of the video and other meta information, a comment form and comments, and a list of related videos.

The Vidcaster player is contained within an iframe. There's logic wrapped around this code to conditionally show the YouTube player or the Vidcaster player. It's best to copy the code exactly as it is shown in the example below. The only things that are safe to change are the height and width of the player.


{% if video_status  == "Youtube" %}
					<iframe width="640" height="360" src="http://www.youtube.com/embed/{{ foreign_video_embed_id }}?modestbranding=1{% if autoplay%}&autoplay=1{%endif%}&rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
					<p id="youtube-player-notice"><strong>Note:</strong> This video is still being imported from YouTube, but once it is finished processing it will be shown in the Vidcaster player.</p>
				{% else %}
					{% if item.valid_youtube %}
					<iframe width="640" height="360" src="http://www.youtube.com/embed/{{ item.valid_youtube }}?modestbranding=1{% if autoplay%}&autoplay=1{%endif%}&rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>
					{% else %}	
                                        <iframe id="video-player" title="{{ current_site.name }} Video Player" width="640" height="360" src="http://{{ current_site.domain }}/player/{{ item.code }}/native/autoplay/" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
					<div class="current-video-thumbnail">
						<img src="{% fetch_thumbnail_url item 120 68 %}" alt="" />
					</div>
					{% endif %}
				{% endif %}

 

Transcription is a paid feature within Vidcaster. In order to display transcribed content for a video, the transcription widget must be included directly below the video player, like so:


{% if item|transcript_as_HTML %}
				<div id="transcript">
					<div id="transcript-wrap">
						<div id="transcript-expand-button"><a href="#">Expand/collapse<span></span></a></div>
						<div id="transcript-text">
							{{ item|transcript_as_HTML|safe }}
						</div>
					</div>
				</div>
				{% endif %}

 

Tip: Also make sure to include the transcription jQuery function and CSS to make this functionality work.

Other content on the video playback page

  • {% load tagging_tags %}, {% load comments_tags %}, {% load item_extras %}, {% load distro_extras %}, {% load subtitle_extras %} – load these files at the top of the template to enable functions that affect tagging, comments, transcription and more.
  • {% block meta %} – this block contains facebook open graph metadata ( og:type, og:video, etc. ).
  • item.geo_long and item.geo_lat – geolocation feature for the video. This is a rarely used feature and can be safely eliminated from your theme if desired.
  • related_items – list of related videos.

The other main pieces of content on the video playback page are: video meta info, comments widget, and tags. Below is an example of each.

Tags


{% tags_for_object item as tags %}
			{% if tags %}
				<div id="tags" class="block">
					<div class="block-header">
						<h3>Tags</h3>
					</div>
					<p>{% for tag in tags %}{% if not forloop.first %}, {% endif %}<a href="/videos/tagged/{{ tag|urlencode }}/" rel="tag">{{ tag }}</a>{% endfor %}</p>
				</div>
				{% endif %}		

 

Video Meta

This example contains item headline, item group (category), pub_date, featured video/edit video meta, summary, and description (long form text).


<h1>{{ item.headline }}</h1>

<p class="meta">{% if item.group %}<span class="group {{ item.group.short_name }}">{{ item.group.get_HTML_tag|safe }}</span>{% endif %}

<span class="date">{{ item.pub_date|date:"F j, Y" }}</span>

{% if edit_state = 'can_edit' %}<span class="edit"><a href="{{ item.get_absolute_url }}edit/">edit this video</a></span>{% endif %}{% if edit_state = 'can_feature' %}<span class="edit"><a href="{{ item.get_absolute_url }}?feature_video">feature this video</a></span>{% endif %}{% if edit_state = 'is_featured' %}<span class="edit"><a href="/Admin/videos/playlists/">This video is featured on your home page</a></span>{% endif %}</p>


{% if item.summary %}
	<div class="summary">
		<p>{{ item.summary }}</p>
	</div>
	{% endif %}
	{% if item.desc %}
	<div class="description">
		{% if HTML_desc %}
		{{ item.desc|safe|urlize|linebreaks }}
		{% else %}
		{{ item.desc|urlize|linebreaks }}
		{% endif %}
	</div>
{% endif %}

 

Comments Widget

If comments are enabled for a site (which they are by default), you can include Vidcaster's default commenting system. If you like, you can also eliminate all this and replace it with any third party commenting widget of your choice. We have a how-to article specifically about third-party commenting widget integration.

Below is sample code for the default comment form and list of comments. Make sure to see the different views of the comment form – {% comment_form_for_object item %} – depending on whether the user is authenticated or not. Go to a video playback page and view it while logged in, and while logged out in order to see this.


	{% if current_site.siteprofile.allow_comments and preview = "False" %}
				{% comments_for_object item as comments %}
				<div id="comments">
					{% if comments %}
 					<div class="block comment-list">
						<div class="block-header">
							<h3>Comments</h3>
						</div>
						<ol>
							{% for comment in comments %}
							<li id="comment{{ comment.id }}" class="{% if comment.poster_is_registered %}registered{% else %}unregistered{% endif %}">
								<div class="avatar">
									<img src="{{ comment.get_poster_gravatar_url }}" alt="" />
								</div>
								<div class="text">
									{{ comment.comment|urlize|linebreaks }}
								</div>
								<div class="meta">
									<p><strong>{{ comment.get_poster_HTML_tag|safe }}</strong>, {{ comment.date|timesince }} ago.</p>
								</div>
							</li>
							{% endfor %}
						</ol>
					</div>
					{% endif %}
					<div class="block simple-form{% if user.is_authenticated %} authenticated{% else %} unauthenticated{% endif %}">
						<div class="block-header">
							<h3>Post a Comment</h3>
						</div>
						{% comment_form_for_object item %}
					</div>
				</div>
				{% endif %}

 

Next section →