Video Tutorials in Webhelp Responsive

Post here questions and problems related to editing and publishing DITA content.
a_kaludzinska
Posts: 3
Joined: Wed Jun 07, 2017 1:42 pm

Video Tutorials in Webhelp Responsive

Post by a_kaludzinska »

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: 222
Joined: Tue Jul 01, 2014 11:48 am

Re: Video Tutorials in Webhelp Responsive

Post by bogdan_cercelaru »

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 »

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: 400
Joined: Mon Dec 05, 2011 6:08 pm

Re: Video Tutorials in Webhelp Responsive

Post by ionela »

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 »

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: 403
Joined: Thu Aug 21, 2003 11:36 am
Location: Craiova
Contact:

Re: Video Tutorials in Webhelp Responsive

Post by radu_pisoi »

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 »

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