Page 1 of 1
Video Tutorials in Webhelp Responsive
Posted: Mon Jul 03, 2017 12:48 pm
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
Re: Video Tutorials in Webhelp Responsive
Posted: Tue Jul 04, 2017 3:53 pm
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
Re: Video Tutorials in Webhelp Responsive
Posted: Thu Sep 21, 2017 7:56 am
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
Re: Video Tutorials in Webhelp Responsive
Posted: Thu Sep 21, 2017 12:33 pm
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
Re: Video Tutorials in Webhelp Responsive
Posted: Fri Sep 22, 2017 12:34 am
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
Re: Video Tutorials in Webhelp Responsive
Posted: Mon Sep 25, 2017 11:08 am
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
Re: Video Tutorials in Webhelp Responsive
Posted: Wed Sep 27, 2017 3:22 am
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