ความคิดเห็น: HTML5 มีแท็กวิดีโอใหม่ซึ่งสามารถเล่นวิดีโอได้โดยตรงโดยไม่ต้องเขียนโปรแกรม คุณต้องเขียนรหัสง่าย ๆ สองสามบรรทัดเพื่อปรับแต่งผู้เล่น
หน้าเว็บ html<body>
<section>
<video>
<Source SRC = "Videos/Introduction.mp4">
</video>
<av>
<div>
<button type = "ปุ่ม"> เล่น </button>
</div>
<div>
<div> </div>
</div>
<div> </div>
</av>
</section>
</body>
สไตล์ CSS
ร่างกาย{
TEXT-ALIGN: CENTER;
-
ส่วนหัว, ส่วน, ส่วนท้าย, กัน, nav, บทความ, hgroup {
แสดง: บล็อก;
-
#ผิว{
ความกว้าง: 700px;
มาร์จิ้น: 10px auto;
ช่องว่าง: 5px;
ความเป็นมา: สีแดง;
ชายแดน: 4px Solid Black;
แนวชายแดน: 20px;
-
Nav {
มาร์จิ้น: 5px 0px;
-
#Buttons {
ลอย: ซ้าย;
ความกว้าง: 70px;
ความสูง: 22px;
-
#DefaultBar {
ตำแหน่ง: ญาติ;
ลอย: ซ้าย;
ความกว้าง: 600px;
ความสูง: 14px;
Padding: 4px;
ชายแดน: 1px Solid Black;
ความเป็นมา: สีเหลือง;
-
/*ProgressBar อยู่ใน DefaultBar*/
#ProgressBar {
ตำแหน่ง: สัมบูรณ์;
ความกว้าง: 0px; /*การควบคุมการเปลี่ยนแปลงด้วย JavaScript*/
ความสูง: 14px; /* และ defaultBar มีความสูงเท่ากัน*/
ความเป็นมา: สีน้ำเงิน;
-
รหัส JavaScript
ฟังก์ชั่น dofisrt ()
-
barsize = 600; // ระวังอย่าใช้หน่วย PX และอย่าใช้ VAR มันเป็นตัวแปรส่วนกลาง
myMovie = document.getElementById ('mymovie');
playbutton = document.getElementById ('playbutton');
bar = document.getElementById ('defaultBar');
progressBar = document.getElementById ('ProgressBar');
playbutton.addeventListener ('คลิก', playorpause, false); // พารามิเตอร์ที่สามเป็นเท็จเสมอลงทะเบียนตัวจัดการเหตุการณ์สำหรับเฟส bublering
bar.addeventListener ('คลิก', clickedbar, false);
-
// ควบคุมการเล่นภาพยนตร์และหยุด
function playorpause () {
ถ้า (! mymovie.paused &&! mymovie.ended) {
mymovie.pause ();
playbutton.innerhtml = 'play';
Window.ClearInterval (UpdatedBar);
}อื่น{
mymovie.play ();
playbutton.innerhtml = 'หยุดชั่วคราว';
updatedBar = setInterval (อัปเดต, 500);
-
-
// ควบคุมการแสดงผลแบบไดนามิกของแถบความคืบหน้า
ฟังก์ชั่นอัปเดต () {
ถ้า (! mymovie.ended) {
var size = parseint (mymovie.currenttime*barsize/mymovie.duration);
progressbar.style.width = size+'px';
}อื่น{
progressbar.style.width = '0px';
playbutton.innerhtml = 'play';
Window.ClearInterval (UpdatedBar);
-
-
// เมาส์คลิกวิธีการควบคุมแถบความคืบหน้า
ฟังก์ชั่น ClickedBar (e) {
ถ้า (! mymovie.paused &&! mymovie.ended) {
var mousex = e.pagex-bar.offsetleft;
var newtime = mousex*mymovie.duration/barsize; // เวลาเริ่มต้นใหม่
myMovie.currentTime = newTime;
progressbar.style.width = mousex+'px';
Window.ClearInterval (UpdatedBar);
-
-
window.addeventListener ('โหลด', dofisrt, false);
สิ่งที่ดีฉันเอารหัสส่วนหนึ่ง