Question about the use of the video tag. / App Creation Studio / RareWire

12 år siden

Object Variables (or underscore variables) are used as one-way roads to send unique information from an object to an action. The object that is triggering the action wanting the information is where you need to define the object variable.

This is why the _file is placed on the panel that triggers the video action. The video tag itself is merely a shell to play the video and is not triggering the videocontrol action at all, so it wouldn't make sense to store the name of the video there. You could always explicitly name the video inside of the videocontrol tag and not use an object variable, but then you would need multiple actions to define more than one video file.

Svar
|

12 år siden

Ok thanks, that does make sense.
I do want to variablize the video file path but I don't want to embed it in the button.

Would it be possible to create a wire style variable?
Example




<action name="set-variable">


   <assign property="var:myVideo" value="test.mp4" />


 </action>


 <action name="video">


     <videocontrol type="play" file="[var:myVideo]" target="VID" />


 </action>

Svar
|

12 år siden

You could do it this way, but you would still need to trigger the "set-variable" action using the button panel. If your goal is just organizing or finding an easier way to find the video file, then one could argue this is the way to go.

Svar
|

12 år siden

Ok, thanks, I am just testing the possibilities. So it appears that there is no way to auto set variables on initial load. For example, what if i wanted my video to auto play at app launch, is that possible?

Svar
|

12 år siden

Any action that you want to trigger on load just needs to add oninit="yes" to your action.




<action name="run" oninit="yes">


   <!--run some actions-->


</action>

Svar
|

12 år siden

Ok that sounds like a good option. Unfortunately it is not working.

Example:




         <action name="onAppInitialize" oninit="yes" >


            <assign property="var:myVideo" value="test.mp4" />


          </action>



         <action name="video">


              <videocontrol type="play" file="[var:myVideo]" target="VID"/>


	</action>

This same area works fine with both setting an inline _file attribute and hard coding the file path into the file source.

Svar
|

12 år siden

you are assigning your variable oninit, but you are not triggering your video action. You could do that by adding a play action to your oninit this way:




<action name="onAppInitialize" oninit="yes" >


<assign property="var:myVideo" value="test.mp4" />


<play action="video" />


</action>



<action name="video">


<videocontrol type="play" file="[var:myVideo]" target="VID"/>


</action>

OR simply adding the videocontrol to your first action like this:




<action name="onAppInitialize" oninit="yes" >


<assign property="var:myVideo" value="test.mp4" />


<videocontrol type="play" file="[var:myVideo]" target="VID"/>


</action>

Svar
|

12 år siden

Yeah sorry i didn't post all of my code. I was loading the video variable on initialization but then attaching the play action to a button. I tried using your code as well. I can tell the initialization code is running, the video background shows up but there is no video content in the screen. It appears that the file="[var:myVideo]" area is not being found.

Svar
|

12 år siden

Is your test.mp4 being stored at the root or is it inside of a folder?

Svar
|

12 år siden

yes it is at the root. I have no problem playing the video when using the _file="test.mp4" structure

Svar
|

12 år siden

I was able to get this working in my tutorial example. Here is the complete code for reference:




<wire >


    <styles>


        <style name="column-number" width="100%" height="20%" color="#000000" size="9" valign="bottom" alignment="center"></style>


        <style name="column-thumb" source="[param:source]" align="center" valign="center" onclick="page" clicktarget="PDF" _page="[param:_page]"></style>


    </styles>


    <classes> 


        <class name="column">


            <panel name="[param:name]" width="25%" height="100%"> 


                <image name="thumb" style="column-thumb" source="[param:source]" _page="[param:_page]"></image>


                <text name="pagenum" style="column-number" text="[param:text]"></text>


            </panel>


        </class>


    </classes> 


    <main>


      <pdf name="constitution" alias="PDF" source="constitution.pdf" height="100%" width="100%" spreads="yes" covertile="no" tile="yes">    


            <panel name="panel" width="150" height="100" align="center" background="ff0000" valign="center" onpage="2">


              <text name="main" width="110" height="100" color="#000000" font="arial" size="12" align="center" alignment="center" valign="center" text="Hello Planet!\n\nHello Back!"></text>


            </panel>


            <platform device="ipad">


              <panel name="link19" width="200" height="20" xpos="85" ypos="907" lypos="600" lxpos="80" onclickup="weblink" onpage="19" background="ff0000"></panel> 


            </platform>


            <platform device="iphone|ipod">


              <panel name="link19" width="200" height="20" xpos="0" ypos="370" lypos="270" lxpos="0" onclickup="weblink" onpage="19" background="ff0000"></panel> 


            </platform>


             <panel name="vid1" xpos="63%" ypos="52%" width="19%" height="14%"  onclick="video" clicktarget="VIDVIEWER"  onpage="8">


                <image name="vbutton" alias="VBUTTON" height="75%" width="75%" source="video.jpg" align="center"></image>


            </panel>


        </pdf>


        <panel name="strip" alias="STRIP" width="100%" height="153" ypos="100%" background="#888888" alpha=".75">


            <pager name="contents" width="100%" height="150" orientation="horizontal" align="center" valign="center" paginate="no">


                <object class="column" name="1" source="pg1.png" _page="1" text="1"></object>


                <object class="column" name="2" source="pg2.png" _page="2" text="2"></object>


                <object class="column" name="3" source="pg3.png" _page="3" text="3"></object>


                <object class="column" name="4" source="pg4.png" _page="4" text="4"></object>


                <object class="column" name="5" source="pg5.png" _page="5" text="5"></object> 


                <object class="column" name="6" source="pg6.png" _page="6" text="6"></object>


                <object class="column" name="7" source="pg7.png" _page="7" text="7"></object>


                <object class="column" name="8" source="pg8.png" _page="8" text="8"></object>


                <object class="column" name="9" source="pg9.png" _page="9" text="9"></object>


                <object class="column" name="10" source="pg10.png" _page="10" text="10"></object>


                <object class="column" name="11" source="pg11.png" _page="11" text="11"></object>


                <object class="column" name="12" source="pg12.png" _page="12" text="12"></object>


                <object class="column" name="13" source="pg13.png" _page="13" text="13"></object>


                <object class="column" name="14" source="pg14.png" _page="14" text="14"></object>


                <object class="column" name="15" source="pg15.png" _page="15" text="15"></object>


                <object class="column" name="16" source="pg16.png" _page="16" text="16"></object>


                <object class="column" name="17" source="pg17.png" _page="17" text="17"></object>


                <object class="column" name="18" source="pg18.png" _page="18" text="18"></object>


                <object class="column" name="19" source="pg19.png" _page="19" text="19"></object>


            </pager>


        </panel>


        <image name="upbutton" alias="UP" source="scrubber.on.png" valign="bottom" align="center" width="56" height="23" onclick="show-contents" clicktarget="../strip"></image>


        <image name="downbutton" source="scrubber.off.png" valign="bottom" align="center" width="56" height="23" alpha="0" onclick="hide-contents" clicktarget="../strip"></image>


        <panel name="web" alias="WEB" height="100%" width="100%" ypos="0" hidden="yes">


            <toolbar name="toolbar" height="5%" width="100%" align="left" valign="top">


                <panel name="button" width="10%" height="80%" align="left" margin="10" valign="center" background="#888888" cornerradius="5" onclickup="weblink-return">


                    <text name="back" width="50%" height="50%" color="#000000" font="" size="12" align="center" valign="center" text="Back"></text>


                </panel>


            </toolbar>


            <web name="web-panel" alias="WEBPANEL" width="100%" height="95%" valign="bottom" url="about:blank"></web>


        </panel>


        <platform device="ipad">


        <panel name="vidViewer" alias="VIDVIEWER" width="600" height="400" align="center" valign="center" alpha="0">


            <panel name="canvas" width="580" height="380" align="center" valign="center" background="#000000" alpha=".7"></panel>


            <video name="vid" alias="VID" width="560" height="360" controls="yes" align="center" valign="center"></video>


            <image name="close" source="close.png" align="right" valign="top" onclick="videoStop"></image>


        </panel>


      </platform>


      <platform device="iphone|ipod">


         <panel name="vidViewer" alias="VIDVIEWER" width="100%" height="100%" align="center" valign="center" alpha="0">


            <video name="vid" alias="VID" width="100%" height="100%" fullscreen="yes" align="center" valign="center" onstop="videoStop"></video>


        </panel>


      </platform>


    </main> 


    <actions>


        <action name="oninit" oninit="yes">


        <assign property="var:myVideo" value="constitution.mp4" />


        </action>


        <action name="page">


            <scroll page="_page"/>


        </action>


        <action name="show-contents">


            <alpha value="0" target="../upbutton"/>


            <alpha value="1" target="../downbutton"/>


            <translate valign="bottom" time=".5"/>


            <platform device="iPad">


              <translate ypos="850" lypos="595" time=".5" target="../upbutton"/>


              <translate ypos="850" lypos="595" time=".5" target="../downbutton"/>


            </platform>


            <platform device="iPhone|iPod">


              <translate ypos="305" lypos="144" time=".5" target="../upbutton"/>


              <translate ypos="305" lypos="144" time=".5" target="../downbutton"/>


            </platform>


        </action>


        <action name="hide-contents">


            <alpha value="1" target="../upbutton"/>


            <alpha value="0" target="../downbutton"/>


            <translate ypos="100%" time=".5"/>


            <translate valign="bottom" time=".5" target="../upbutton"/>


            <translate valign="bottom" time=".5" target="../downbutton"/>


        </action>


        <action name="weblink">


            <alpha value="0" time="0" target="UP"/>


            <replace type="flipright" target="PDF" replacement="WEB" time="1"/>


            <load url="http://constitutioncenter.org" target="WEBPANEL"/>


        </action>    


        <action name="weblink-return">


            <alpha value="1" time="0" target="UP"/>


            <alpha value="0" target="../upbutton"/>


            <replace type="flipleft" target="WEB" replacement="PDF" time="1"/>  


            <load url="about:blank" target="WEBPANEL"/>


        </action>  


        <action name="video">


            <alpha value="1" time=".25"/>


            <alpha value="0" time=".25" target="VBUTTON"/>


            <platform device="ipad">


              <reveal type="curldown" time="1" delay="0"  />


            </platform>


            <videocontrol type="play" file="[var:myVideo]" target="VID" />


        </action>


        <action name="videoStop">


             <videocontrol type="stop" file="[var:myVideo]" target="VID" />


             <platform device="ipad">


              <reveal type="curlup" time="1" target="VIDVIEWER" />


            </platform>


            <alpha value="0" time="0" target="VIDVIEWER" />


            <alpha value="1" time=".25" target="VBUTTON"/>


        </action>


    </actions>


</wire>

Svar
|

12 år siden

If you would like me to look at your code, I would be more than happy to. Just invite me as a collaborator: icahill@rarewire.com

Thanks.

Svar
|

12 år siden

invite sent

Svar
|

12 år siden

Ok, I see the issue.

Your [var:myVideo] is assigning a value of "test.mp4" and your video file is called "test.m4v", so your extensions are not matching.

Svar
|

12 år siden

Yep, that was it. Hand to forehead.... Sorry about that and thanks again for your help.

Svar
|