Videos are implemented on multiple content types throughout the site. Here are some of the implementation methods, organized by content type:
Scripts
In the editor, add the YouTube video id in the Script Information section. There can be only one video id per script, and it can only be for YouTube. It is output as HTML using the biopac_youtube_postload() function.
Curriculum
In the editor, add videos under Curriculum Content, in the Vidoes tab. There are two types of videos that can be added: Associated Videos and Other Videos.
Associated Videos link to Video posts, which can be edited under Support > Videos.
Other Videos can be entered ad hoc, with the values for Title, URL, Height, and Width being editable. The HTML output for these items will vary based on the URL entered. The parsing rules attempt to determine the best format for displaying each kind of video.
Products and Other Content Types
The editor is very similar to what’s described in teh Curriculum section above, with some minor differences. The Video tab includes an extra field for adding text/HTML content above the videos.
HTML Output
- If any extension (mp4, mov, etc) is found on the file name then it will use the <embed> or <video> tag depending on the extension. “mp4” will always use the <video> tag since it should play in HTML5 video. The HTML output will vary based on the video data, but it will always be set not autoplay.
- If no extension is found it will assume it’s a YouTube link. The code will attempt to extract the YouTube ID if the URL is provided and pass that to the biopac_youtube_postload() function.
Video Archive Page
This page contains custom JavaScript code for playing videos from the Video post type. It replaces the video content at the top of the page with the video that is selected on the page.
YouTube Post-Loading
The biopac_youtube_postload() function, found in themes/biopac/library/bones.php, outputs a div element that will be used to display a thumbnail. The thumbnail is post-loaded also, using standard thumbnail URLs based on the video ID. If the thumbnail is clicked it will load the video iframe and play the video. Autoplay does not work on most mobile devices, so it requires a second click. The thumbnail image size can be selected by setting the $thumb_size argrument in the function call.
The javascript for post-loading is in themes/biopac/library/js/biopac-scripts.js. It will fire on jQuery DOM ready event.