أفضل ما في الأمر:
<html lang=en><head><meta charset=UTF-8><title>Documenttitle><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size: 24px;).player {العرض: 720px;الارتفاع: 360px;الهامش: 10px تلقائي;الحدود: 1px صلب #000;لون الخلفية: #000;الموضع: نسبي;نصف قطر الحدود: 6px;}.فيديو مشغل {العرض: 720px;الارتفاع: 360px;}.عناصر التحكم {العرض: 700px;الارتفاع: 40px;لون الخلفية: rgba (255,255,0,0.3);الموضع: مطلق;أسفل: 10px;يسار: 10px;نصف القطر الحدودي: 10px;}.switch {الموضع: مطلق;العرض: 22px;الارتفاع: 22px;لون الخلفية: أحمر;اليسار: 10px;الأعلى: 9px;نصف القطر الحدودي: 50%;}.progress {width : 432 بكسل;الارتفاع: 10 بكسل;الموضع: مطلق;لون الخلفية: rgba(255,255,255,0.4);left: 40px;top: 15px;border-radius: 4px;overflow: Hidden;}.curr-progress {width: 0%;height: 100%;background-color: #fff;}. الوقت {العرض: 120 بكسل؛ الارتفاع: 20 بكسل؛ محاذاة النص: المركز؛ ارتفاع الخط: 20px;حجم الخط: 12px;اللون: #fff;الموضع: مطلق;اليسار: 510px;الأعلى: 10px;}.extend {الموضع: مطلق;العرض: 20px;الارتفاع: 20px;لون الخلفية: أحمر;اليمين: 10px ;الأعلى: 10px;}نمط>الرأس><الجسم><الشكل> <figcaption>التعرف على figcaption><div class=player><video src=11.mp4>فيديو><div class=controls><a href=# class=switch>a><div class=progress><div class= curr-progress>div>div><div class=time><span class=curr-time>00:00:00span>/<span class=total-time>00:00:00span>div><a href=# class=extend>a>div>div>الشكل><script>var video = document.querySelector('video');var playBtn = document .querySelector('.switch');var currProgress = document.querySelector('.curr-progress');var currTime = document.querySelector('.curr-time');var TotalTime = document.querySelector('.total-time');var Extend = document.querySelector('.extend');var tTime = 0;playBtn.onclick = function () {if(video.paused){ // تشغيل الفيديو.play(); //play () قم بتحميل التحميل () توقف مؤقتًا () قم بالإيقاف المؤقت () آخر {video.pause ()؛}} // قم بتشغيل video.oncanplay = function() {tTime = video.duration; //الحصول على معلومات الاتصال (المصدر)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//التحقق من معلومات الاتصال عبر الإنترنت video.ontimeupdate = function() {var cTime = video.currentTime; // قم بتعديل الشكل var cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+%;}extend.onclick = function() { video.webkitRequestFullScreen(); //الإجابة على هذا السؤال هي وظيفة getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor( الوقت٪ 3600/60)؛ فار s = Math.floor(time%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>=10?s:0+s; إرجاع h+:+m+:+s;}script>body>html>总结تعلم كيفية استخدام HTML5视频播放(فيديو)، جافا سكريبت تستخدم جافا سكريبت لتتمكن من القيام بذلك. لا داعي للقلق بشأن هذا الأمر. لقد تم إنشاء VeVb 武 林 网 网 站 的 支 持!