Video Tutorials in Webhelp Responsive

a_kaludzinska
Posts: 3
Joined: Wed Jun 07, 2017 1:42 pm

Video Tutorials in Webhelp Responsive

Post by a_kaludzinska » Mon Jul 03, 2017 12:48 pm

Hello,

Is there any procedure or tutorial on adding the Video Tutorials section in webhelp responsive? The same section there's on the Oxygen xml website: https://www.oxygenxml.com/doc/versions/19.0/ug-editor/

Thank you,
Anna

bogdan_cercelaru
Posts: 213
Joined: Tue Jul 01, 2014 11:48 am

Re: Video Tutorials in Webhelp Responsive

Post by bogdan_cercelaru » Tue Jul 04, 2017 3:53 pm

Hello,

To include videos in our user manual, we are using an XML fragment like the one below which is referred through the "webhelp.fragment.before.toc_or_tiles" parameter in our build process.

Code: Select all


<div id="videos">
<div id="video-elements" class="container">
<h1 class="container_title">
Videos
</h1>
<div class="video_element vd_col col-xs-12 col-sm-4">
<a href="/path/to/video.html" class="vcontent" id="video_id" target="_blank">
<div class="square">
<div class="vd_decoration" style="opacity: 1;"></div>
<img src="/img/video_placeholder.png"/><span class="duration">00:00</span>
</div>
</a>
<div class="vd_title">
<a href="/path/to/video.html" id="vide_link" title="Video Title" target="_blank">Video Title</a>
</div>
</div>
</div>
</div>
More information about WebHelp Responsive customization methods can be found here: https://www.oxygenxml.com/doc/versions/ ... ation.html

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

shanweizhong
Posts: 30
Joined: Mon Jul 10, 2017 2:18 am

Re: Video Tutorials in Webhelp Responsive

Post by shanweizhong » Thu Sep 21, 2017 7:56 am

Hi Bogdan,

I need to include a list of video images like this (with a play button on top of an image) in a DITA file. Do you have any suggestions how I can do that?

The code in your example can be used in a HTML file, but I guess it would be very different in the source DITA file, and I don't know how to achieve that.

Any suggestions will be highly appreciated.

Cheers,
Michael
bogdan_cercelaru wrote:Hello,

To include videos in our user manual, we are using an XML fragment like the one below which is referred through the "webhelp.fragment.before.toc_or_tiles" parameter in our build process.

Code: Select all


<div id="videos">
<div id="video-elements" class="container">
<h1 class="container_title">
Videos
</h1>
<div class="video_element vd_col col-xs-12 col-sm-4">
<a href="/path/to/video.html" class="vcontent" id="video_id" target="_blank">
<div class="square">
<div class="vd_decoration" style="opacity: 1;"></div>
<img src="/img/video_placeholder.png"/><span class="duration">00:00</span>
</div>
</a>
<div class="vd_title">
<a href="/path/to/video.html" id="vide_link" title="Video Title" target="_blank">Video Title</a>
</div>
</div>
</div>
</div>
More information about WebHelp Responsive customization methods can be found here: https://www.oxygenxml.com/doc/versions/ ... ation.html

Regards,
Bogdan

ionela
Posts: 290
Joined: Mon Dec 05, 2011 6:08 pm

Re: Video Tutorials in Webhelp Responsive

Post by ionela » Thu Sep 21, 2017 12:33 pm

Hi Michael,

oXygen XML includes actions to easily insert video or audio content within DITA topics. You can insert references to video and audio media resources (such as YouTube videos) in your DITA topics and publish them to WebHelp output.
More details about this are available in our user manual:
https://www.oxygenxml.com/doc/versions/ ... media.html

We also have a video demonstration regarding media object support in oXygen XML:
https://www.oxygenxml.com/demo/Media_Objects.html

Regards,
Ionela
Ionela Istodor
oXygen XML Editor and Author Support

shanweizhong
Posts: 30
Joined: Mon Jul 10, 2017 2:18 am

Re: Video Tutorials in Webhelp Responsive

Post by shanweizhong » Fri Sep 22, 2017 12:34 am

Thanks Ionela.

I checked those topics before and I know how to insert videos into DITA topics directly. However, the requirement that I got is to use images (frames from videos) on one page, with a play button on top of each image, and if users click the image or the play button, another window if opened for playing the real video. This is just like what is done on the home page of your user's guide (https://www.oxygenxml.com/doc/versions/19.0/ug-author/).

I know how to implement such mechanism in HTML, but not DITA. Maybe you can give me a hand about that?

Cheers,
Michael
ionela wrote:Hi Michael,

oXygen XML includes actions to easily insert video or audio content within DITA topics. You can insert references to video and audio media resources (such as YouTube videos) in your DITA topics and publish them to WebHelp output.
More details about this are available in our user manual:
https://www.oxygenxml.com/doc/versions/ ... media.html

We also have a video demonstration regarding media object support in oXygen XML:
https://www.oxygenxml.com/demo/Media_Objects.html

Regards,
Ionela

radu_pisoi
Posts: 343
Joined: Thu Aug 21, 2003 11:36 am
Location: Craiova
Contact:

Re: Video Tutorials in Webhelp Responsive

Post by radu_pisoi » Mon Sep 25, 2017 11:08 am

Hi,

I think you can use the video/@poster[1] attribute to specify an URL of an image shown until the user plays or seeks. The path to the poster image can be specified in the DITA topic using the param element:

Code: Select all

<object data="../video/mickey.mp4" outputclass="video">
<param name="poster" value="../video/posterimage.jpg"/>
</object>
If the image is locally and you want to copy it in the output folder, you can specify the resource in the DITA Map as 'resource-only'

Code: Select all

<topicref href="video/posterimage.jpg" format="jpg" processing-role="resource-only"/>
--------
[1] HTML <video> element
https://developer.mozilla.org/en-US/doc ... ment/video
Radu Pisoi
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com

shanweizhong
Posts: 30
Joined: Mon Jul 10, 2017 2:18 am

Re: Video Tutorials in Webhelp Responsive

Post by shanweizhong » Wed Sep 27, 2017 3:22 am

Thanks Radu. My final solution is to manually create an image of the video, with a play button on top of it, and then link the image to the real video-playing topic.

Cheers,
Michael

radu_pisoi wrote:Hi,

I think you can use the video/@poster[1] attribute to specify an URL of an image shown until the user plays or seeks. The path to the poster image can be specified in the DITA topic using the param element:

Code: Select all

<object data="../video/mickey.mp4" outputclass="video">
<param name="poster" value="../video/posterimage.jpg"/>
</object>
If the image is locally and you want to copy it in the output folder, you can specify the resource in the DITA Map as 'resource-only'

Code: Select all

<topicref href="video/posterimage.jpg" format="jpg" processing-role="resource-only"/>
--------
[1] HTML <video> element
https://developer.mozilla.org/en-US/doc ... ment/video

Post Reply