What Will I Learn?
<ul>
<li>You will learn How to input and play video files
<li>You will learn How to input and play Audio files
<li>You will learn How to create a digital clock on a web page
<li>You will learn How to combine video files, music files and digital clocks in a web page
<h4>Requirements
<p dir="auto">.
<ul>
<li>You have basic about HTML
<li>You have basic about PHP
<li>You have basic about javascript
<li>To practice this tutorial need a text editor file (Notepad ++), browser (Google Chrome) and server (localhost, XAMPP).
<h4>Difficulty
<ul>
<li>Basic
<h4>Tutorial Contents
<p dir="auto">In this tutorial we will learn how to input and play video files, audio files, and digital clocks in php with tags and html elements.
<ul>
<li><strong>How to input and play video files
<li>First open your server localhost (XAMP)
<li>Secondly,Open your text editor ( notepad ++)
<li>Then copy the input video file into the folder when video call later,example like picture below :
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517844457/xjvc3erarzqr07nubstc.jpg" alt="ex1.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517844457/xjvc3erarzqr07nubstc.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517844457/xjvc3erarzqr07nubstc.jpg 2x" />
<ul>
<li>then equate the title video then input to the text editor script as below,
<li>After that create a new file and save it as html extention, such as <strong>video.html and do not forget to prepare video file with format (mp.4) into html folder so that when calling the inputed file it can appear.
<li>Lastly create a html script with elements, attributes and tags like the scrip below.
<pre><code><html>
<head>
<title>video</title>
<center><br><b>Play Video</b></br></center>
<br>
<table align=center bgcolor="green"><tr><td>
<center><video height="345"width="275"controls>
<source src="Ungu feat Peterpan - Cinta Yang Lain - YouTube.mp4"type="video/mp4">
</video></center>
</table>
</body>
</html>
<ul>
<li><strong>Output
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517845343/zr7lvpifjwsggqwlkd6j.jpg" alt="ex2.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517845343/zr7lvpifjwsggqwlkd6j.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517845343/zr7lvpifjwsggqwlkd6j.jpg 2x" />
<ul>
<li>Explanation<br />
<code><table align=center bgcolor="green"><tr><td>
<li><code>tableis a tag that serves to create a data consisting of rows and columns, then<code>align = center Determine the position of the web page line that is <code>center is the tags html functioning put text in the center.
<li><code>bgcolor="green" green is making the base color of the green baground
<li><code><tr>which defines the rows in the table<code><td>that functioned thick appearance
<li><code><center><video height="345"width="275"controls> ie the function of putting video in the middle of the web page, with the hight size of 345 and the size of width is 275
<li><code><source src="Ungu feat Peterpan - Cinta Yang Lain - YouTube.mp4"type="video/mp4"><br />
serves to call the video file you want to display, examples such as "Ungu feat Peterpan - Cinta Yang Lain - YouTube.mp4" is the name of the video file to be displayed.
<li><strong>Secondly,How to input and play Audio files
<li>Open your text editor ( notepad ++)
<li>then equate the title audio then input to the text editor script as below,
<li>After that create a new file and save it as html extention, such as <strong>audio.html and do not forget to prepare audio file with format (mp.3) into html folder so that when calling the inputed file it can appear.
<li>Lastly create a html script with elements, attributes and tags like the scrip below.
<pre><code><html>
<head>
<title>Audio</title>
<center><br><b>Play Audio</b></br></center>
<br>
<center> <embed src = " Ungu Bila Tiba.mp3" border ="2" autostart="false" height = "55" width = "600" align="middle"> </center>
</table>
</body>
</html>
<ul>
<li><strong>Output
<p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517849767/k48exltso5c4aqkbncvc.jpg" alt="ex3.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517849767/k48exltso5c4aqkbncvc.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517849767/k48exltso5c4aqkbncvc.jpg 2x" />
<ul>
<li>Explanation ,<code><center> <embed src = " Ungu Bila Tiba.mp3" border ="2" autostart="false" height = "55" width = "600" align="middle"> </center>
<p dir="auto"><code>embed is a html tag, which functions to display external files, such as files, videos, mp3, pdf, and multimedia files on web pages, and at this time we just focus on How to input and play Audio files.
<ul>
<li>How to create a digital clock on a web page
<li>Open your text editor ( notepad ++)
<li>After that create a new file and save it as php extention, such as <strong>digital-clock.php
<li>Lastly create a php ,javascript and html script with elements, attributes and tags like the scrip below.
<pre><code><html>
<head>
<title> Digital Clock</title>
<script type="text/javascript">
// 1 detik = 1000
window.setTimeout("waktu()",1000);
function waktu() {
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("tanggal").innerHTML
= tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}
</script>
</head>
<br><center><b>Digital Clock</br></b></center>
<body bgcolor="with" text="red" onload="waktu()">
<b><table align=center bgcolor="White"><tr><td>
<div id="tanggal">
</div></td></tr> </b>
</table>
</body>
</html>
<ul>
<li><p dir="auto">Output<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517852516/c4ygjvmdvfoiff1qjrso.jpg" alt="ex4.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517852516/c4ygjvmdvfoiff1qjrso.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517852516/c4ygjvmdvfoiff1qjrso.jpg 2x" />
<li><p dir="auto">in the manufacture of this digital clock using the function of javascript, because by using it the prose runs in accordance with real-time conditions on web pages and also uses attributes, elemet and html tags, and inserted with php file
<li><p dir="auto"><strong>How to combine video files, music files and digital clocks in a web page
<li><p dir="auto">How to create a digital clock on a web page
<li><p dir="auto">Open your text editor ( notepad ++)
<li><p dir="auto">After that create a new file and save it as php extention, such as <strong>combinasi.php
<li><p dir="auto">Lastly create a php ,javascript and html script with elements, attributes and tags like the scrip below.
<pre><code><html>
<head>
<title>Combinasi</title>
<script type="text/javascript">
// 1 detik = 1000
window.setTimeout("waktu()",1000);
function waktu() {
var tanggal = new Date();
setTimeout("waktu()",1000);
document.getElementById("tanggal").innerHTML
= tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
}
</script>
</head>
<body bgcolor="white" text="black" onload="waktu()">
<table align=center bgcolor="red"><tr><td>
<div id="tanggal">
</div></td></tr>
<center><br><b>Play Video</b></br></center>
<br>
<center><video height="245"width="275"controls>
<source src="Ungu feat Peterpan - Cinta Yang Lain - YouTube.mp4"type="video/mp4">
</video></center>
<center><br><b>Play Audio</b></br></center>
<br>
<center> <embed src = " Ungu Bila Tiba.mp3" border ="2" autostart="false" height = "55" width = "600" align="middle"> </center>
<br>
<center> <embed src = " Shadows- Lindsey Stirling.mp3" border ="2" autostart="false" height = "55" width = "600" align="middle"> </center>
<br><center><b>Digital Clock</br></b></center>
</table>
</body>
</html>
<ul>
<li><p dir="auto">Output<br />
<img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517854132/gxafvuoajcqabyup2uac.jpg" alt="ex5.jpg" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517854132/gxafvuoajcqabyup2uac.jpg 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1517854132/gxafvuoajcqabyup2uac.jpg 2x" />
<li><p dir="auto">Explanation<br />
make it like the scrip above do not forget to put the music and audio files as listed in the scrip, to the Xamp-> htdoc-> folder and the name of the folder you created then please you guys own it myself hopefully this tutorial can be useful for you beginners programer especially php, html, javascript. Wasalam
<h4>Curriculum
<p dir="auto">How to display pdf file, dynamic link and autorefresh time in to one php file
<p dir="auto"><br /><hr /><em>Posted on <a href="https://utopian.io/utopian-io/@dongkrak/how-to-input-and-play-video-files-audio-files-and-digital-clocks-in-php-with-tags-and-html-elements" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io - Rewarding Open Source Contributors<hr /><p>
Your contribution cannot be approved because it does not follow the Utopian Rules.
The contribution cannot be approved because:
You can contact us on Discord.
[utopian-moderator]