Video Tutorials in Webhelp Responsive

a_kaludzinska
Posts: 3

Video Tutorials in Webhelp Responsive

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: 188

Re: Video Tutorials in Webhelp Responsive

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: 10

Re: Video Tutorials in Webhelp Responsive

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: 141

Re: Video Tutorials in Webhelp Responsive

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: 10

Re: Video Tutorials in Webhelp Responsive

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: 302
Location: Craiova

Re: Video Tutorials in Webhelp Responsive

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: 10

Re: Video Tutorials in Webhelp Responsive

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest