Home > Developer > JavaScript
In the daily use of the application, multimedia players are often used to play multimedia files, including video, audio and so on, so for developers, learning multimedia playback technology for the development of applications is very helpful. This section focuses on using HTML5 and Javascrip to implement local video playback.
To implement multimedia playback in your application, you need to use the video control, which briefly describes several common properties of the following video controls:
The next step is to explain the knowledge points associated with video playback through a specific application. Start by creating a blank application project for the JavaScript Windows store in Visual Studio 2012 and name it mediaapplication. Then open the Default.html file, add two div elements to the BODY element, and add a video control in the first div to play the videos, set its Class property to "Videostyle", and set the ID property to "videoid" In the second Div, add a "open" button for selecting a multimedia file and a P element for displaying the cue information, and set the ID property of the two elements to "Pickfilebutton" and "output" respectively, as shown in the following code:
<body>
<div>
???? <H2 id= "title" > Multimedia Example
<video class= "Videostyle" id= "VideoID" controls= "true" loop= "true" src= "" ></video>
</div>
???? <div>
<button id= "Pickfilebutton" > Open </button>
???? <p id= "Output" > </p>
</div>
</body>
To control the appearance of the interface elements, create a new CSS style file in the CSS folder, name it Stylefile, and add the following code to set the position or style of each element.
/* Set where the element is displayed */
#title
{
margin:0px 20px 20px 530px;
}
/* Set Video style of the control */
. Videostyle
{
height:170px;
width:230px;
margin:0px 20px 20px 480px;
Background:blue;
}
/* set the display position and size of the button */
#pickFileButton
{
margin-left:550px;
font-size:15px;
}
/* Set P where the element is displayed */
#output {
margin-left:500px;
}
The style file Stylefile.css is then referenced within the head element of the default.html file to implement the display appearance of the control interface element, as shown in the following code:
<link href= "/css/stylefile.css" rel= "stylesheet"/>
After the layout of the foreground interface, the following to apply the background logic function. Open a Default.js file, in the file "Args.setpromise (WinJS.UI.processAll ()); Statement, add the following code to register the Click event handler function for the Open button, as shown in the following code:
document.getElementById ("Pickfilebutton"). AddEventListener ("click", Pickfile);
The code calls the getElementById function to get a button with an ID of "Pickfilebutton" and uses the AddEventListener function to register the event handler pickfile for the button's Click event.
Next in "app.onactivated = function (args) {...};" The statement defines the event handler Pickfile, implements the file selection and the video playback function, and the relevant code is as follows:
// definition Click event handler function
function Pickfile () {
// Create Fileopenpicker type of Object
var openpicker = new Windows.Storage.Pickers.FileOpenPicker ();
// set the initial location of the file picker as a video library
Openpicker.suggestedstartlocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
// file type filtering
OpenPicker.fileTypeFilter.replaceAll ([". mp4", ". wmv"]);
// Select a multimedia file
Openpicker.picksinglefileasync (). Then (function (file) {
if (file) {
var localvideo = document.getElementById ("VideoID");
// Create for multimedia files URL , and assign a value to Video control's src Properties
LOCALVIDEO.SRC = Url.createobjecturl (file, {onetimeonly:true});
// Play this multimedia file
Localvideo.play ();
// a prompt message is given when a multimedia file is successfully opened
Output.innertext = " successfully opened a multimedia file! ";
}
else{
Output.innertext = " Please choose a multimedia file! ";
}
},
// If an exception occurs, the appropriate exception is handled
Function (Error) {
Output.innertext = " Error: "+ error.message;
});
}
In the code above, first create a new object of type Fileopenpicker Openpicker as the file picker, and set the Suggestedstartlocation property value of Openpicker object to Videoslibrary, Position the file picker start location as a local video library. Then, through the Filetypefilter.replaceall function of the Openpicker object, the file picker can select the file type of ". mp4" and ". wmv". Next call the Openpicker object's Picksinglefileasync function to select the multimedia file, in the Picksinglefileasync function, through the IF statement to check file, if file is not empty, the file has been selected, Then call the document.getElementById function to get an element with an id attribute value of "VideoID", assign it to the Localvideo variable, and call the Url.createobjecturl function to create a URL for the selected multimedia file, assigning a value to the SRC attribute of the Localvideo object. The Url.createobjecturl function has two parameters, one is file and one is onetimeonly. Where file is the selected multimedia file, onetimeonly refers to whether the URL created for the multimedia file is used only once. Finally call the Localvideo object's play function to implement the video playback function, and display the prompt message in the P element "successfully opened a multimedia file!" If the file is not selected, a prompt appears in the P element "Please choose a multimedia file!" "。
Start debugging, as shown in the initial state of the interface 19-32. Click the Open button to go to the file Picker interface, the default starting position is the video library, and if you want to open a multimedia file in another location, you can click the drop-down symbol next to file to select it. Here you select the "Bike race. mp4" video file in the video library, which is loaded into the videos control and plays, and the prompt message in the interface "successfully opened a multimedia file!" ", run effect 19-33 as shown.
Figure 19-32 Initial state of the interface
Figure 19-33 Effects of multimedia playback
WIN10 series: JavaScript multimedia
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
