Question

In: Computer Science

Please provide HTML code for the following: - Create a page that lists a set of...

Please provide HTML code for the following:

- Create a page that lists a set of audio files and shows their duration

- Create a page that lists a set of video files and plays a different video when
you click on the play icon

Solutions

Expert Solution

Audio code:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Audio Check</title>
    <style>
        .ul-list {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul class="ul-list">
        <li>
            <audio controls>
                <source src="my.mp3" type="audio/mpeg">
            </audio>
        </li>
        <li>
            <audio controls>
                <source src="mpthreetest.mp3" type="audio/mpeg">
            </audio>
        </li>
        <li>
            <audio controls>
                <source src="my2.mp3" type="audio/mpeg">
            </audio>
        </li>
        <li>
            <audio controls>
                <source src="mpthreetest1.mp3" type="audio/mpeg">
            </audio>
        </li>
    </ul>
</body>
<html>

Output for Audio:

Video code:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>DEMO:Home</title>
    <style>
        .ul-list {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul class="ul-list">
        <li>
            <video width="360" height="140" controls>
                <source src="video/realshort.mp4" type="video/mp4">
            </video>
        </li>
        <li>
            <video width="360" height="140" controls>
                <source src="video/demo.mp4" type="video/mp4">
            </video>
        </li>
        <li>
            <video width="360" height="140" controls>
                <source src="video/realshort.mp4" type="video/mp4">
            </video>
        </li>
    </ul>
</body>
<html>

Output for video:


Related Solutions

The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
Html code of Doctors info page
Html code of Doctors info page
Create following webpage in HTML : 1. Login Page This is the first page the user...
Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...
a) write a python programme for converting url.to html please provide valid code and please share...
a) write a python programme for converting url.to html please provide valid code and please share screenshots to me
specify the code to create html with the following content: 1. a paragraph stating, this is...
specify the code to create html with the following content: 1. a paragraph stating, this is an example. 2 image logo.jpg with alternate text ABC Logo below the paragraph created in 1.
2. The HTML document on the following page consists of JavaScript code executed when the document...
2. The HTML document on the following page consists of JavaScript code executed when the document is loaded. It prompts the user for his/her name (first and last names) then outputs the greeting “Hello Mr. _____!” or “Hello Ms. _____!” (where _____ is the user’s last name) depending on whether the first name is recognized as a male name. (In the code, only three male names are checked; a realistic program would check many more names.) We allow for the...
Please edit the code with linked lists in C++ Please provide your BookData.txt file as well...
Please edit the code with linked lists in C++ Please provide your BookData.txt file as well BookRecord.cpp file #include "BookRecord.h" #include <stdio.h> #include <string.h> #include <iostream> #include <fstream> using namespace std; BookRecord::BookRecord() {    strcpy_s(m_sName, "");    m_lStockNum = 0;    m_iClassification = 0;    m_dCost = 0.0;    m_iCount = 0; } BookRecord::BookRecord(const char* name, long sn, int cl, double cost) {    strcpy_s(m_sName, name);    m_lStockNum = sn;    m_iClassification = cl;    m_dCost = cost;    m_iCount...
HTML Create a page of texts that uses inline elements. The page should contain a citation,...
HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.
Given the html below, create css to produce the following illustrated color page output: Red for...
Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head>       <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body>              <p>     I'm a paragraph, what color am I ?      </p>    <ul>      <li id = "fix"> I'm a list item;what color am I? </li>        </ul> <div class = "central1"> <p class ="above">   I'm...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT