CIS465 Lab Assignment 1 Creating a Customized Video Playback

Total Page：16

File Type：pdf, Size：1020Kb

CIS465 Lab Assignment 1 Creating a Customized Video Playback

CIS465 Lab Assignment 1 SS Chung Creating a Customized Video Playback Controller in HTML5/XHTML The HTML5/XHTML video element (as defined in Document Object Model (DOM)) provides methods, properties, and events that you can use to control playback video files with JavaScript in your presentation on your webpage. In the Lab1, you are creating your own video playback controller in html with java script on a webpage using video element in Html5/Xhtml. The HTML5 video element gets you started using video elements on your webpages. With the addition of JavaScript, you can programmatically create custom playback controls, get and set the current playing position, and change the current video by using some of the basic methods and properties that you can use to control your video object. The HTML5 video element has its own built-in controls to play, pause, and seek the video playback. You can create your own customized controller by using the play and pause methods to start and stop the video, the currentTime property to seek within the video, and the paused property to get the current playing state of the video player. Useful Resource Site for more on video element. Video Element Object Implement your own Video Playback Controller on a Webpage using <video> element and java script with the Following Controlling Buttons: 1. Play (>) 2. Pause (|| ) : 3. Restart (|>) 4. Forward with interval value 10 (>>) 5. Rewind with interval value -10 (<<) Extra Points: Make Button 1 as follow: 1. Play (>) with toggled Pause (||) : If currently playing, show “Pause” Else, show “Play” Notes: 1. For this lab, you need a web browser with XHTML and HTML5 (IE9 or higher, Chrome, Firefox) 2. You are not supposed to use element <embed> with controller attribute for this lab1. 3. You can use your own video file in mp4. If you don’t have mp4 file, download a sample mp4 file on the class webpage. 4. Submit the followings: DO NOT SUBMIT your Video File on Blackboard ! 1) Your HTML source code in doc file and your executable html file 2) Lab 1 Output in doc file showing all the screen captures of each button execution of your video. (See the Lab1 example output on the class webpage) Sample Customized Video Player .

Copy Link

Recommended publications

WEB-BASED ANNOTATION and COLLABORATION Electronic Document Annotation Using a Standards-Compliant Web Browser
WEB-BASED ANNOTATION AND COLLABORATION Electronic Document Annotation Using a Standards-compliant Web Browser Trev Harmon School of Technology, Brigham Young University, 265 CTB, Provo, Utah, USA Keywords: Annotation, collaboration, web-based, e-learning. Abstract: The Internet provides a powerful medium for communication and collaboration through web-based applications. However, most web-based annotation and collaboration applications require additional software, such as applets, plug-ins, and extensions, in order to work correctly with the web browsers typically found on today’s computers. This in combination with the ever-growing number of file formats poses an obstacle to the wide-scale deployment of annotation and collaboration systems across the heterogeneous networks common in the academic and corporate worlds. In order to address these issues, a web-based system was developed that allows for freeform (handwritten) and typed annotation of over twenty common file formats via a standards-compliant web browser without the need of additional software. The system also provides a multi-tiered security architecture that allows authors control over who has access to read and annotate their documents. While initially designed for use in academia, flexibility within the system allows it to be used for many annotation and collaborative tasks such as distance-learning, collaborative projects, online discussion and bulletin boards, graphical wikis, and electronic grading. The open-source nature of the system provides the opportunity for its continued development and extension. 1 INTRODUCTION did not foresee the broad spectrum of uses expected of their technologies by today’s users. While serving While the telegraph and telephone may have cracked this useful purpose, such add-on software can open the door of instantaneous, worldwide become problematic in some circumstances because communication, the Internet has flung it wide open.
[Show full text]
Document Object Model
Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
[Show full text]
Chapter 10 Document Object Model and Dynamic HTML
Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
[Show full text]
Cascading Style Sheet Web Tool
CASCADING STYLE SHEET WEB TOOL _______________ A Thesis Presented to the Faculty of San Diego State University _______________ In Partial Fulfillment of the Requirements for the Degree Master of Science in Computer Science _______________ by Kalthoum Y. Adam Summer 2011 iii Copyright © 2011 by Kalthoum Y. Adam All Rights Reserved iv DEDICATION I dedicate this work to my parents who taught me not to give up on fulfilling my dreams. To my faithful husband for his continued support and motivation. To my sons who were my great inspiration. To all my family and friends for being there for me when I needed them most. v ABSTRACT OF THE THESIS Cascading Style Sheet Web Tool by Kalthoum Y. Adam Master of Science in Computer Science San Diego State University, 2011 Cascading Style Sheet (CSS) is a style language that separates the style of a web document from its content. It is used to customize the layout and control the appearance of web pages written by markup languages. CSS saves time while developing the web page by applying the same layout and style to all pages in the website. Furthermore, it makes the website easy to maintain by just editing one file. In this thesis, we developed a CSS web tool that is intended to web developers who will hand-code their HTML and CSS to have a complete control over the web page layout and style. The tool is a form wizard that helps developers through a user-friendly interface to create a website template with a valid CSS and XHTML code.
[Show full text]
Abstracts Ing XML Information
394 TUGboat, Volume 20 (1999), No. 4 new precise meanings assigned old familar words.Such pairings are indispensable to those who must work in both languages — or those who must translate from one into the other! The specification covers 90 pages, the introduction another 124.And this double issue has still more: a comparison between SGML and XML, an introduction to Document Object Models (interfaces for XML doc- uments), generating MathML in Omega, a program to generate MathML-encoded mathematics, and finally, the issue closes with a translation of the XML FAQ (v.1.5, June 1999), maintained by Peter Flynn. In all, over 300 pages devoted to XML. Michel Goossens, XML et XSL : unnouveau départ pour le web [XML and XSL:Anewventure for the Web]; pp. 3–126 Late in1996, the W3C andseveral major soft- ware vendors decided to define a markup language specifically optimized for the Web: XML (eXtensible Markup Language) was born. It is a simple dialect of SGML, which does not use many of SGML’s seldom- used and complex functions, and does away with most limitations of HTML. After anintroduction to the XML standard, we describe XSL (eXtensible Stylesheet Language) for presenting and transform- Abstracts ing XML information. Finally we say a few words about other recent developments in the XML arena. [Author’s abstract] LesCahiersGUTenberg As mentioned in the editorial, this article is intended Contents of Double Issue 33/34 to be read in conjunction with the actual specification, (November 1999) provided later in the same issue. Michel Goossens, Editorial´ : XML ou la démocratisationdu web [Editorial: XML or, the Sarra Ben Lagha, Walid Sadfi and democratisationof the web]; pp.
[Show full text]
Security Considerations Around the Usage of Client-Side Storage Apis
Security considerations around the usage of client-side storage APIs Stefano Belloro (BBC) Alexios Mylonas (Bournemouth University) Technical Report No. BUCSR-2018-01 January 12 2018 ABSTRACT Web Storage, Indexed Database API and Web SQL Database are primitives that allow web browsers to store information in the client in a much more advanced way compared to other techniques such as HTTP Cookies. They were originally introduced with the goal of enhancing the capabilities of websites, however, they are often exploited as a way of tracking users across multiple sessions and websites. This work is divided in two parts. First, it quantifies the usage of these three primitives in the context of user tracking. This is done by performing a large-scale analysis on the usage of these techniques in the wild. The results highlight that code snippets belonging to those primitives can be found in tracking scripts at a surprising high rate, suggesting that user tracking is a major use case of these technologies. The second part reviews of the effectiveness of the removal of client-side storage data in modern browsers. A web application, built for specifically for this study, is used to highlight that it is often extremely hard, if not impossible, for users to remove personal data stored using the three primitives considered. This finding has significant implications, because those techniques are often uses as vector for cookie resurrection. CONTENTS Abstract ........................................................................................................................
[Show full text]
Document Object Model †DOM‡ Level 3 Load and Save Specification
Document Object Model (DOM) Level 3 Load and Save Specification Document Object Model (DOM) Level 3 Load and Save Specification Version 1.0 W3C Recommendation 07 April 2004 This version: http://www.w3.org/TR/2004/REC-DOM-Level-3-LS-20040407 Latest version: http://www.w3.org/TR/DOM-Level-3-LS Previous version: http://www.w3.org/TR/2004/PR-DOM-Level-3-LS-20040205/ Editors: Johnny Stenback, Netscape Andy Heninger, IBM (until March 2001) Please refer to the errata for this document, which may include some normative corrections. This document is also available in these non-normative formats: XML file, plain text, PostScript file, PDF file, single HTML file, and ZIP file. See also translations of this document. Copyright ©2004 W3C ® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Abstract This specification defines the Document Object Model Load and Save Level 3, a platform- and language-neutral interface that allows programs and scripts to dynamically load the content of an XML document into a DOM document and serialize a DOM document into an XML document; DOM documents being defined in [DOM Level 2 Core] or newer, and XML documents being defined in [XML 1.0] or newer. It also allows filtering of content at load time and at serialization time. 1 Status of this document Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
[Show full text]
Document Object Model †DOM‡ Level 2 HTML Specification
Document Object Model (DOM) Level 2 HTML Specification Document Object Model (DOM) Level 2 HTML Specification Version 1.0 W3C Candidate Recommendation 07 October 2002 This version: http://www.w3.org/TR/2002/CR-DOM-Level-2-HTML-20021007 Latest version: http://www.w3.org/TR/DOM-Level-2-HTML Previous version: http://www.w3.org/TR/2002/CR-DOM-Level-2-HTML-20020605 Editors: Johnny Stenback, Netscape Philippe Le Hégaret, W3C Arnaud Le Hors, W3C and IBM (until November 2000) This document is also available in these non-normative formats: XML fileplain text, PostScript file, PDF file, single HTML file, and ZIP file. Copyright ©2002 W3C ® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Abstract This specification defines the Document Object Model Level 2 HTML, a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content and structure of [HTML 4.01] and [XHTML 1.0] documents. The Document Object Model Level 2 HTML builds on the Document Object Model Level 2 Core [DOM Level 2 Core] and is not backward compatible with DOM Level 1 HTML [DOM Level 1]. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C. 1 Table of contents This is the 07 October 2002 W3C Candidate Recommendation of "DOM Level 2 HTML". This version updates the 5 June 2002 version based on the feedback from the implementers and the results of the DOM Level 2 HTML Test Suite.
[Show full text]
Using HTML5 Apis
7Lesson 7: Using HTML5 APIs Objectives By the end of this lesson, you will be able to: 7.1: Define the Document Object Model (DOM). 7.2: Define application programming interface (API), and list the common HTML5 APIs. 7.3: Use the HTML5 Canvas API for advanced techniques. 7.4: Develop offline Web applications using the HTML5 AppCache API. 7.5: Use the HTML5 Geolocation API to obtain geographic information about a user. 7.6: Create drag-and-drop Web pages using the HTML5 Drag-and-Drop API. 7.7: Use the HTML5 File API to interact with files. 7.8: Use the HTML5 History API to manipulate a browser's history. 7.9: Retrieve and manipulate HTML5 data using XMLHttpRequest and jQuery. 7-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. Which HTML5 API allows a Web program to run locally on a client system? a. Canvas b. AppCache c. Drag-and-Drop d. Geolocation 2. Which of the following is a function of the HTML5 File API? a. Create preview thumbnail images during image uploads b. Locate the position of the client system c. Move files using a drop zone d. Validate HTML5 code 3. What is the function of the HTML5 History API? © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 7: Using HTML5 APIs 7-3 Introduction to HTML5 APIs As mentioned in an earlier lesson, experts in Web technology expect that the future of Web development will rely heavily on HTML5 APIs. HTML5 APIs consist of HTML5, CSS and JavaScript — the Web development trifecta.
[Show full text]
Enabling the Immersive 3D Web with COLLADA & Webgl Introduction
Enabling the Immersive 3D Web with COLLADA & WebGL Rita Turkowski – June 30, 2010 Introduction The web is built on standard document formats (HTML, XML, CSS) and standard communication protocols (HTTP, TCP/IP), gaining momentum by the principle and power of the hyperlink (URL / URI)(1). Browsers and servers implementing those standards have revolutionized publishing and searching. Not only can documents be linked by other documents, but since the data is provided in a standard open language it also provides the ability to link to specific content inside a document, enabling the rich navigation and search functionalities that we take for granted today. Two standard technologies developed by the Khronos Group(2), WebGL and COLLADA, are opening the way for enhancing the web experience into the third dimension (3D) of imaging. Thanks to this work, 3D applications can now take advantage of the fundamentals of the web while natively exploiting 3D graphics hardware acceleration. This white paper describes both Khronos standards at an abstract level and the evolution of an ecosystem that will enable immersive 3D Web applications to evolve from currently disparate implementations (i.e. “walled gardens” or “silos”) to become standard web publishing accessible natively in a web browser. What is WebGL? WebGL(3) is a low-level JavaScript API enabling web applications to take advantage of 3D graphics hardware acceleration in a standard way. Currently the only way to provide interactive display of appreciable quality 3D content in a web browser is to create a separate application loaded as a plug-in. Plug-ins are problematic as they require end-user installation which is not transparent, placing a burden on the end-user, and are frequently forbidden by companies security guidelines, impeding the general adoption of 3D content.
[Show full text]
Presentazione Di Powerpoint
(@_cube0x8) - Introduction - What is Chrome Ragamuffin - What Chrome Ragamuffin is not - Why Chrome Ragamuffin should be useful - Goal - Tools of the trade - Forensic Overview - Chrom(e|ium) overview - Objects we have focused on - Case Study - Chrome Ragamuffin architecture - State of art - Work in progress and future works • Internal research project • It is a memory forensics tool • Three main functionalities: • Detailed overview about user navigation • Web page contents • Client-site attacks traces • IDS/NIDS • Browser extension • Anti-virus • SQLite databases analyzer • Most used browser • We hadn’t tools to analyze web browser internals • It can find a lot of new artifacts - Source code analysis - Debugging and data structures analysis - Data structures extraction - to implement the Proof of Concept Browser Process Renderer Renderer Blink Blink V8 V8 Browser process Visible page WebContents NavigationController entries_ NavigationEntry NavigationEntry NavigationEntry iframe1 iframe2 frame_tree_ iframe1 iframe2 iframe3 iframe4 Renderer process Blink::Document Document Object Model Blink::HTMLIframeElement url_ html title_ m_tagName_ head body … … Text div document_element_ m_contentFrame_ m_URL_ … iframe p form … Browser process disk_cache:: MemBackendImpl net::HttpCache unordered_map MemoryEntryImpl entries_ key value … … … … … … max_size_ mode_ … … current_size_ … … disk_cache_ Example 1 Browser objects: • Evidence: offset object, url, status code, method, transition, timestamp, restore type, page type, form params Status PageState
[Show full text]
Mathedit, a Browser-Based Visual Mathematics Expression Editor
Proceeding of The 11th Asian Technology Conference in Mathematics， HongKong, December 2006, pp. 271-279. MathEdit, A Browser-based Visual Mathematics Expression Editor Wei Su1, Paul.Wang2, Lian Li1, Guanyu Li1, Yanjuan Zhao1 1Lanzhou University, Lanzhou, Gansu,730000, China 2 Kent State University, Kent, Ohio 44242-0001, USA Abstract. MathEdit is a browser-based interactive editor for mathematical expressions being developed jointly by researchers at Kent State University (USA) and Lanzhou University (China). MathEdit is an open source software written in JavaScript and DOM. It makes use of browser support, either natively or via a plug-in, for MathML display. The dynamic nature of MathEdit makes it useful for mathematical web sites to enable users to create/edit/submit mathematical expression. MathEdit is also an important tool for WME (Web-based Mathematics Education) and MAG (Mathematics Assessment Grid), both are on-going research projects at Kent and Lanzhou. We present the design and implementation of MathEdit, its user interface, program architecture, and API. Also discussed is the flexibility and extensibility of MathEdit. 1. Introduction This research collaboration between ICM at Kent State University and the Department of Computer Science at Lanzhou University (LZ) started in 2004 when LZ got interested in adopting WME (Web-based Mathematics Education) [11, 12, 21] for use in China. WME is a modern distributed system on the Web for mathematics education. The approach is to provide each participating school with a website that is comprehensive, well-organized, dynamic, interactive, hands-on and ready to use by teachers for mathematics teaching in the classroom. An interesting sub-project for WME is to create a simple to use editor for users to input mathematical expressions.
[Show full text]