Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Exercise 2-10: Playing a Video

Page of 168
Displaying a Video

Overview

During this lab, you will display a video by instantiating the Ext.Video component.

  • Use Ext.Video to play a video file

Steps

Define the View

  1. Open Sencha Architect
  2. Open the following project:
    /path/To/arch101/mobile/lab/exercise10/exercise10.xds.

    Note: This is the solution from the prior exercise.
  3. From the Toolbox, drag a Container and drop it onto the Main view of the Project Inspctor.
  4. Configure the following Ext.Container Properties:
    • title: Drink
    • iconCls: tv
    • layout: hbox
    • pack: center
    • align: center
    • itemId: friendsvideo
  5. From the Toolbox, drag a Titlebar component and drop it onto the friendsvideo view.
  6. Configure the following Ext.Titlebar property:
    • title: Drink with Friends
  7. From the Toolbox, drag a Video component and drop it onto the friendsvideo view.
  8. Configure the following properties:
    • autoResume: true
    • loop: true
    • muted: false
    • url: http://webapps.figleaf.com/arch101/friends.mp4
    • posterUrl: http://webapps.figleaf.com/arch101/friends.png
  9. Click Save
  10. Click Preview
  11. Test your application

-- End of Exercise --

Page of 168
comments powered by Disqus