Video Tutorials in Webhelp Responsive

[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]

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

[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

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]

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

[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

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]

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

[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

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