Use the video element to create a video player in HTML 5
I’ve been reading about html5 recently. The title of the book is "html5&API Web Programming". I made a demo after reading the book. Here I use The video element is very simple. As long as you put the address of the video in the text box and click the play button, the video can be played. When you click to pause, the video will be reloaded. The code is as follows:
<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易影片播放器</title>
<script type="text/javascript">
function playOrPauseVideo(){
var videoUrl=document.getElementById("videoUrl").value;
var video=document.getElementById("video");
//影片不为播放状态
if(video.paused)
{
//URL改变时，重新加载
if(videoUrl!=video.src)
{
video.src=videoUrl;
video.load();
}
else
{//播放
video.play()
}
document.getElementById("playButton").value="暂停";
}
else
{
//暂停
video.pause();
document.getElementById("playButton").value="播放";
}
}
</script>
</head>
<body>
<!--建议使用谷歌浏览器浏览，看看运行的效果吧-->
<video id="video" width="400" height="300" autoplay></video><br />
影片的URL：<input type="text" id="videoUrl"/>
<input id="playButton" type="button" onclick="playOrPauseVideo()" value="播放"/>
</body>
</html>2. [Picture] QQ screenshot unnamed.png
【Related Recommendation】
1. The solution to the problem that the H5 video tag can only play sound but not video
3. Share examples of HTML5 Banner production
4. Overview of the power and future development of HTML5
5. Introduction to how to use the latest h5 tag datalis
The above is the detailed content of Use the video element to create a video player in HTML 5. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to fix VIDEO DXGKRNL fatal error in Windows 11
Apr 13, 2023 pm 08:22 PM
Click to enter: ChatGPT Tool Plug-in Navigation Collection Some users complained that their computers frequently crashed with the stop code VIDEO DXGKRNL FATAL ERROR. This particular issue occurs only occasionally and has a bugcheck value of 0x00000113, which indicates a violation in the Microsoft DirectX graphics kernel subsystem, as indicated by the bugcheck value. Usually, the error occurs when a corrupt driver interferes with the normal operation of the graphics card's graphics processor. If you're currently struggling with this specific issue, our article will provide you with a variety of high-quality troubleshooting tips. Below you'll find various methods that other users who encountered the exact same error have used successfully. yes
Motorola Razr 50 Ultra shows up in leaked teaser video with waterproof case and huge secondary display
Jun 20, 2024 pm 09:31 PM
Over the past few weeks, the most important specifications and the euro prices of the Motorola Razr 50 and the Razr 50 Ultra have been leaked. Now the enormously reliable leaker @MysteryLupin was able to publish the teaser video embedded below, which
Pixel 9 Pro XL vs iPhone 15 Pro Max camera comparison reveals surprising Google wins in video and zoom performance
Aug 24, 2024 pm 12:32 PM
The Google Pixel 9 Pro and Pro XL are Google's answers to the likes of the Samsung Galaxy S24 Ultra and the Apple iPhone 15 Pro and Pro Max. Daniel Sin on YouTube(watch below) has compared the Google Pixel 9 Pro XL to the iPhone 15 Pro Max with some
Panasonic Lumix S9 supply shortages complete Fujifilm X100VI impersonation act despite bad press
Jun 14, 2024 am 09:36 AM
Sinceitslaunchearlierthisyear,thePanasonicLumixS9hasbeenembroiledincontroversy.BetweenthecornersPanasoniccuttoarriveatsuchasmallbodyandthefusscertaincamerareviewerskickeduponYouTube,itseemedliketheLumixS9wasdoom
A closer look at the video element in HTML
Feb 24, 2024 pm 08:18 PM
Detailed explanation of the video tag in HTML The video tag in HTML5 is a tag used to play videos on web pages. It can render videos using different formats, such as MP4, WebM, Ogg, and more. In this article, we will introduce the use of video tag in detail and provide specific code examples. Basic Structure The following is the basic structure of the video tag:
Snapdragon X Elite CPU performance nearly identical on battery and plugged-in in Vivobook S15 benchmarks
Jun 20, 2024 pm 03:59 PM
Despite the hype surrounding the Qualcomm Snapdragon X Elite, it has been a rather mediocre launch. In our review, we found that the most impressive part of the new Qualcomm Snapdragon X Elite X1E-78-100-powered Asus Vivobook S 15 was the seamlessnes
Snapdragon X Elite CPU performance nearly identical on battery vs AC power in Vivobook S15 benchmarks
Jun 21, 2024 am 06:50 AM
Despite the hype surrounding the Qualcomm Snapdragon X Elite, it has been a rather mediocre launch. In our review, we found that the most impressive part of the new Qualcomm Snapdragon X Elite X1E-78-100-powered Asus Vivobook S 15 was the seamlessnes
What should I do if the video tag of html5 cannot be played?
Jan 28, 2023 am 09:36 AM
Solution to the problem that the HTML5 video tag cannot be played: 1. Use a video screenshot to make a play button and occupy the original position of the video; 2. Monitor the click event of the occupying button and use "video.play()"; 3. Just hide the bitmap and loading.
