I have inserted a mp4 move using Flare's "Insert Multimedia" feature using the HTML5 option. Ideally I would like the user to start the video (as opposed to auto play), but I would like the video to automatically re-size to expand when it is played. Any thoughts? In the Flare help, there is a reference to a "Scale" option on the Advanced Tab of the 'Edit Multimedia' dialog window, however I don't see it in Flare 2017. (The 'Value' option referenced seems like it may be what I'm after, alas, it is not there!)
Thanks!
Auto Size HTML5 Movie When Played
Auto Size HTML5 Movie When Played
Chris Field
Manager of Product Knowledge Systems
Shoptech Software
Manager of Product Knowledge Systems
Shoptech Software
-
- Jr. Propeller Head
- Posts: 6
- Joined: Tue Apr 18, 2017 11:33 am
Re: Auto Size HTML5 Movie When Played
I've added a css style to my video tags like this:
(Delete the autoplay="" if you don't want it to play automatically)
Now in styles.css I've added:
I recorded my videos at 1024x720 hence the max-width value. You can adjust as appropriate.
Code: Select all
<video id="video-source" controls="" autoplay="" class="varySize">
<source src="../Resources/Videos/xxxx.mp4" type="video/mp4" />
</video>
Now in styles.css I've added:
Code: Select all
.varySize
{
width: 80%;
height: auto;
max-width: 1024px;
min-width: 512px;
}
video
{
background-color: transparent !important;
}
Re: Auto Size HTML5 Movie When Played
A question about this from the shallow end of the pool. I opened up styles.css and added the code for "varySize" and "video." But the first part about adding css styles to video tags. Is this added in the text editor for the topic? I know this is probably very basic. But I need to know where this goes. I added an html5/mp4 video using the same steps described by the person who initiated this post. And it shows up in my topic as an object (again, in the text editor).
<object MadCap:HTML5Video="true" ... (so on and so forth)
Does the <video> information go below <object>? Does it replace the <object> string information? Does this go in a totally different place?
Thanks for your help and patience if you're willing to set me straight here. Apparently, if you import media using Windows Media Player, it provides an advanced setting to automatically launch the video in a larger screen size when it's played. But that feature is not there for HTML5 Movie.
Thanks.
<object MadCap:HTML5Video="true" ... (so on and so forth)
Does the <video> information go below <object>? Does it replace the <object> string information? Does this go in a totally different place?
Thanks for your help and patience if you're willing to set me straight here. Apparently, if you import media using Windows Media Player, it provides an advanced setting to automatically launch the video in a larger screen size when it's played. But that feature is not there for HTML5 Movie.
Thanks.
-
- Propeller Head
- Posts: 21
- Joined: Thu Aug 24, 2017 9:05 am
- Location: Los Angeles, CA
- Contact:
Re: Auto Size HTML5 Movie When Played
In the code chunk shown above by LookingForHelp, the assumption (I believe) was that you would be looking at your topic in the text editor, and versus using the Flare Multimedia ribbon button, you would insert this code chunk, replacing the file string (coloured red here below) with your specific media file location and name:
<video id="video-source" controls="" autoplay="" class="varySize">
<source src="../Resources/Videos/xxxx.mp4" type="video/mp4" />
</video>
and that this therefore "tags" the video with ID video-source and class varySize - hence connecting to the CSS entries you'd already made.
I will add that I tried adding this plain jane as instructed here, and couldn't get it functioning as expected.
FWIW: what we are doing here, we have an HTML 5 video (mp4) on our landing area in our help system, it does *not* autoplay, and it's full-width but adapatable to page scaling (to allow for our users to scale the browser window down and still *see* the help whilst they're working in the CADD app we're helping them with) and we have added it using the Flare multimedia button - here's the XML code from the relevant topic:
<object MadCap:HTML5Video="true" src="Resources/Multimedia/Complete-FINAL.mp4" MadCap:Param_controls="true" MadCap:Param_muted="true" MadCap:Param_loop="true" MadCap:Param_autoplay="false ">
</object>
And for us, this works as expected - does what it says on the tin.
Hope this helps some.
<video id="video-source" controls="" autoplay="" class="varySize">
<source src="../Resources/Videos/xxxx.mp4" type="video/mp4" />
</video>
and that this therefore "tags" the video with ID video-source and class varySize - hence connecting to the CSS entries you'd already made.
I will add that I tried adding this plain jane as instructed here, and couldn't get it functioning as expected.
FWIW: what we are doing here, we have an HTML 5 video (mp4) on our landing area in our help system, it does *not* autoplay, and it's full-width but adapatable to page scaling (to allow for our users to scale the browser window down and still *see* the help whilst they're working in the CADD app we're helping them with) and we have added it using the Flare multimedia button - here's the XML code from the relevant topic:
<object MadCap:HTML5Video="true" src="Resources/Multimedia/Complete-FINAL.mp4" MadCap:Param_controls="true" MadCap:Param_muted="true" MadCap:Param_loop="true" MadCap:Param_autoplay="false ">
</object>
And for us, this works as expected - does what it says on the tin.
Hope this helps some.
You do not have the required permissions to view the files attached to this post.
Gerard Falla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla