Thẻ <audio> trong HTML5 được sử dụng để nhúng âm thanh trực tiếp vào trang web mà không cần sử dụng các plugin bên ngoài. Dưới đây là một số thuộc tính, CSS và hàm JavaScript liên quan:
Thuộc tính trong thẻ <audio>:
src: Xác định nguồn âm thanh, có thể là một đường dẫn tới file audio.
<audio src="audiofile.mp3" controls></audio>
controls: Hiển thị thanh điều khiển như play, pause, volume.
<audio src="audiofile.mp3" controls></audio>
autoplay: Tự động phát âm thanh khi trang được tải.
<audio src="audiofile.mp3" autoplay></audio>
loop: Lặp lại phát âm thanh.
<audio src="audiofile.mp3" loop></audio>
CSS liên quan:
Bạn có thể tùy chỉnh giao diện của thẻ <audio> bằng CSS, chẳng hạn như thay đổi màu sắc, kích thước, v.v. Một số ví dụ:
audio {
width: 100%;
max-width: 400px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
JavaScript liên quan:
play(): Bắt đầu phát âm thanh.
var audio = document.getElementById("myAudio");
audio.play();
pause(): Tạm dừng âm thanh.
var audio = document.getElementById("myAudio");
audio.pause();
volume: Thuộc tính để đặt và lấy giá trị âm lượng.
var audio = document.getElementById("myAudio");
audio.volume = 0.5; // Đặt âm lượng là 50%
currentTime: Thuộc tính để đặt và lấy thời điểm hiện tại của phát âm thanh.
var audio = document.getElementById("myAudio");
audio.currentTime = 30; // Chuyển đến thời điểm 30 giây
Nhớ rằng, để sử dụng các hàm JavaScript này, bạn cần có một đối tượng audio trong HTML và sử dụng phương thức getElementById để truy cập nó.
Thẻ <video> trong HTML5 được sử dụng để nhúng và phát video trực tiếp trên trang web mà không cần sử dụng các plugin bên ngoài. Dưới đây là một số thuộc tính, CSS và hàm JavaScript liên quan:
Thuộc tính trong thẻ <video>:
src: Xác định nguồn video, có thể là một đường dẫn tới file video.
<video src="videofile.mp4" controls></video>
controls: Hiển thị thanh điều khiển như play, pause, volume.
<video src="videofile.mp4" controls></video>
autoplay: Tự động phát video khi trang được tải.
<video src="videofile.mp4" autoplay></video>
loop: Lặp lại phát video.
<video src="videofile.mp4" loop></video>
CSS liên quan:
Tương tự như thẻ <audio>, bạn có thể tùy chỉnh giao diện của thẻ <video> bằng CSS, chẳng hạn như thay đổi màu sắc, kích thước, v.v.
video {
width: 100%;
max-width: 600px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
JavaScript liên quan:
play(): Bắt đầu phát video.
var video = document.getElementById("myVideo");
video.play();
pause(): Tạm dừng video.
var video = document.getElementById("myVideo");
video.pause();
volume: Thuộc tính để đặt và lấy giá trị âm lượng.
var video = document.getElementById("myVideo");
video.volume = 0.5; // Đặt âm lượng là 50%
currentTime: Thuộc tính để đặt và lấy thời điểm hiện tại của phát video.
var video = document.getElementById("myVideo");
video.currentTime = 30; // Chuyển đến thời điểm 30 giây
Nhớ rằng, để sử dụng các hàm JavaScript này, bạn cần có một đối tượng video trong HTML và sử dụng phương thức getElementById để truy cập nó.
Dưới đây là một ví dụ sử dụng thẻ <audio> và <video> trong HTML, và sử dụng jQuery để thao tác với các chức năng như play, pause, volume, current time, và kiểm tra trạng thái (playing hoặc paused):
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio và Video với jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
/* Tùy chỉnh giao diện cho audio và video */
audio, video {
width: 100%;
max-width: 400px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- Thẻ Audio -->
<audio id="myAudio" controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<!-- Thẻ Video -->
<video id="myVideo" controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<script>
$(document).ready(function(){
var audioElement = $("#myAudio")[0];
var videoElement = $("#myVideo")[0];
// Play Audio
$("#playAudio").click(function(){
audioElement.play();
});
// Pause Audio
$("#pauseAudio").click(function(){
audioElement.pause();
});
// Toggle Play/Pause Video
$("#toggleVideo").click(function(){
if (videoElement.paused) {
videoElement.play();
} else {
videoElement.pause();
}
});
// Set/Get Volume for Audio
$("#setVolume").click(function(){
audioElement.volume = 0.5; // Đặt âm lượng là 50%
});
// Get Current Time for Video
$("#getCurrentTime").click(function(){
var currentTime = videoElement.currentTime;
alert("Current Time: " + currentTime + " seconds");
});
// Check if Audio is Paused
$("#checkAudioPaused").click(function(){
if (audioElement.paused) {
alert("Audio is paused");
} else {
alert("Audio is playing");
}
});
// Check if Video is Playing
$("#checkVideoPlaying").click(function(){
if (!videoElement.paused) {
alert("Video is playing");
} else {
alert("Video is paused");
}
});
});
</script>
</body>
</html>
Trong ví dụ này, tôi sử dụng thư viện jQuery để thuận tiện cho việc thao tác với các thẻ audio và video. Các chức năng như play, pause, volume, và current time được thực hiện thông qua các sự kiện click trên các nút tương ứng.
Thẻ <iframe> trong HTML5 được sử dụng để nhúng nội dung từ một trang web khác vào trong trang web hiện tại. Đây là một số thuộc tính phổ biến của thẻ <iframe>:
src: Địa chỉ URL của trang web mà bạn muốn nhúng.
<iframe src="https://www.example.com"></iframe>
width và height: Kích thước của iframe, có thể được đặt bằng pixel hoặc phần trăm.
<iframe src="https://www.example.com" width="600" height="400"></iframe>
frameborder: Xác định xem có hiển thị đường viền xung quanh iframe hay không. Giá trị 0 nếu không muốn hiển thị, và 1 nếu muốn hiển thị.
<iframe src="https://www.example.com" frameborder="0"></iframe>
allowfullscreen: Cho phép hoặc ngăn chặn chế độ toàn màn hình.
<iframe src="https://www.example.com" allowfullscreen></iframe>
sandbox: Cung cấp một môi trường chạy riêng biệt để bảo vệ trang web chủ. Các giá trị thường thấy bao gồm "allow-same-origin", "allow-scripts", và "allow-popups".
<iframe src="https://www.example.com" sandbox="allow-same-origin allow-scripts"></iframe>
name: Đặt tên cho iframe để có thể được sử dụng làm mục tiêu của các siêu liên kết hoặc các form.
<iframe src="https://www.example.com" name="myFrame"></iframe>
Lưu ý rằng việc nhúng nội dung từ trang web khác có thể liên quan đến vấn đề bảo mật, và sử dụng cẩn thận để tránh các vấn đề như tấn công XSS (Cross-Site Scripting).