+1
Answered

Question about the use of the video tag.

sovtek 7 years ago updated 7 years ago 15
I noticed in your tutorials for video you are creating an attribute called _file which links to the video file. I noticed this _file variable is inside of the image element that actually launches the video. Could the _file variable be placed inside of the video tag instead? Not only would it make more sense but it would also be easier to track in larger wire files.
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.
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>
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.
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?
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>
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.
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>
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.
Is your test.mp4 being stored at the root or is it inside of a folder?
yes it is at the root. I have no problem playing the video when using the _file="test.mp4" structure
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>

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.
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.
Yep, that was it. Hand to forehead.... Sorry about that and thanks again for your help.