Sinhala HTML Editor Extended Help

Inserting Videos in html documents

Video can be embedded within the contents of the webpage via several html tags, namely, <embed>, <object> and <video>.  Subsequent sections will detail the process of inserting video into webpages using the latter two html tags.

Video with the <object> tag

Requires a media player to view media files. Thus PC/browser need the necessary support to play a particular file format (mp4, mpeg, swf, wmv.. etc) with a particular media player (i.e. Adobe Flash Player, QuickTime, Windows Media Player ..etc.). Format of the media file could determine the choice of the player. Or you could consider converting files to the format that is acceptable by the media player of your choice. In the following example we will use Windows Media Player (WPM) to play wmv files. The device is inherently supported in IE, but may require plugins to be installed for Chrome, Firefox and other browsers. The process is generally quite simple. OS/browser may prompt you if plugins are required and guide you through the installation process.

The object element can be inserted to any position within the body of the document.  If unspecified elements properties (position, size, etc..) will retain their inherit values. Several attributes (e.g. type, filename/data etc.) in the object element must be specified for it to function, whilst other attributes (autostart, ShowControls, ShowDisplay, etc.) are optional.  Example code:

<object type="video/x-ms-wmv" width="300" height="250">
<param name="filename" value ="examplevideo.wmv" />
<param name="autostart" value="0"/>
</object>

The specified MIME type (video/x-ms-wmv) should allow you play media files that are playable in your PCs WMP. As such a PC with WMP 12 (OS Vista+/IE9+ or comparable versions of Chrome, FF, etc...) will play MP4 both locally and embed in HTML documents whilst WMP 11 (OS Xp/IE8) will not (NB: wmv, mpg, avi, etc. should function in both cases). To use other media players you must specify the appropriate MIME type (e.g. type="application/x-shockwave-flash" to play swf files with the Macromedia Flash Player).

• To insert video with ASHE (Sinhala HTML Editor)
  1. Insert content in the example code (from previous section) to the textarea in ASHE. The values of the attributes should reflect the specification of your video file (i.e. type="video/x-ms-wmv" with the MIME type and value="examplevideo.wmv" with the video filename). Width and height can be modified to the desired magnitude. If the video file is located in the same folder as the html document the respective value should be only the file name. If not the path of the video file must be incorporated into in the attribute, in a similar manner to src attribute (in image elements). The path can be relative or absolute, implementation detailed in Link and Div tab.
  2. The textarea content can be viewed via the web browser by clicking button.  Example code detailed in the previous section produced the following (If the video failed to function it is likely that your OS/browser lacks the requirements to view wmv files).
     
     
• The object elements can be positioned, be in a container with borders and background colours. It can be achieved in a similar manner to other elements via ASHE.
• 1. Click button to open the form and Input Padding:30px (magnitude can be changed to your preference). Select the textual range encompassing all of the object element. Click button in the division form.
     • Resultant code:
       • <div style='padding:30px; '><object type="video/x-ms-wmv" width="300" height="250">
         <param name="filename" value ="examplevideo.wmv" />
         <param name="autostart" value="0"/>
         </object></div>
     • The padding around video image allows you to center it in its container.
  2. Create a container around the video image.  Click    button to open the form and input values.  To have the video image centered, specify the container width (width of video + padding left + padding right) and height (video height + padding top + padding bottom).  Values in our example would be Width:360px (i.e. 300 + 30 +30) and Height: 310px (250 + 30 + 30)  NB: ASHE inserts the dimension units (px) by default. Thus only enter the magnitude.
  3. Input values for the border and background colour (e.g. Border: 2px grey solid and Background Colour:lightsteelblue.  NB: Ensure that selection is changed from the inherit 'No Border' to 'Border' ).  Select the textual range to encompass previous content . Click button in the division form.
     • Resultant code:
       • <div style='width:360px; height:310px; border:1px grey solid; background-color:lightsteelblue; '>
         <div style='padding:30px; '><object type="video/x-ms-wmv" width="300" height="250">
         <param name="filename" value ="examplevideo.wmv" />
         <param name="autostart" value="0"/>
         </object></div></div>
  4. Next step is to position the content to a desired location with the html document. In the current example it will be moved towards the right of its inherit position. In order to accomplish that with ASHE, first Click button to open the positioning form.   Ensure positioning type is 'Relative'.  Input the magnitude the element is to be displaced from its inherit position (e.g. Left:300px).  Select the textual range to encompass previously content and click button in the position form.
     • Resultant code:
       • <div style='position:relative; left:300px;'><div style='width:360px; height:310px; border:1px grey solid; background-color:lightsteelblue; '>
         <div style='padding:30px; '><object type="video/x-ms-wmv" width="300" height="250">
         <param name="filename" value ="examplevideo.wmv" />
         <param name="autostart" value="0"/>
         </object></div></div></div>
  5. Click to display the content via the web browser and/or export to new window and save ( View and Save tab) . The rendered content should appear as:
     1. 
        
  6. The detailed example utilises only a limited number of html attributes and properties. Modification and additions to the core code could produce infinitely varying results. In the example below are two video images contained in a different background. It was accomplished by replacing the background colour of the previous example with a background image (i.e. background-image:url("imagefilename.jpg") and the addition of a second object element. The size of the container and elements were altered accordingly.

Video with the <video> tag

Video element is available in HTML 5 (supported in IE9+ and comparable versions of Chrome, FF, etc). It enables you to embed video without the need for specific media players and plugin support. However, video format support may vary amongst browsers. As a rectification it allows you have multiple video sources in the single element. Browser
should determine which format is supported and play the file accordingly. Moreover object and embed tags could be inserted into the video element as a fallback.

• Example code:
  • <video width="300" height="250" controls="controls">
    <source src="examplevideo.mp4" type="video/mp4" />
    <source src="examplevideo.ogg" type="video/ogg" />
  • <source src="examplevideo.webm" type="video/webm" />
    </video>
    

In the example the it is expected that IE and Chrome will attempt to play the mp4 file whilst FF will play the ogg file. Thus to achieve cross browser functionality video files may need to be converted to several different formats. The rendered version of the example code is shown below: