قبل ظهور HTML5، تم إنتاج الصوت والفيديو عبر الإنترنت بمساعدة Flash أو أدوات الطرف الثالث، والآن يدعم HTML5 هذه الوظيفة أيضًا. في المتصفح الذي يدعم HTML5، يمكن تشغيل الصوت والفيديو دون تثبيت أي مكونات إضافية. يوفر الدعم الأصلي للصوت والفيديو إمكانات تطوير هائلة في HTML5.
تضمين الصوت بتنسيق HTML (الطريقة التقليدية): على الرغم من إمكانية تنفيذ هذه الطريقة، إلا أنها تتطلب أن يدعم المتصفح Flash ولا يمكن التحكم فيها، لذا فإن تنفيذها أمر مزعج للغاية.
<ارتفاع الكائن=200 العرض=200 البيانات=2_1.swf </object><embed src=2_1.mp4 type=>
وهذا يعني أن هناك مشكلة كبيرة في HTML5، وهي التوافق. صوتي
تنسيقات الصوت التي يدعمها HTML5: فيديوتنسيق الفيديو:
يمكن أن نرى مما سبق أن HTML5 يبدو أنه يدعم بعض التنسيقات، لذا عندما تجد أن الصوت والفيديو لا يتم عرضهما عند استخدام HTML5، فمن المفترض أن يكون هناك مشكلة في عدم دعم التنسيق. ملاحظة: يحتوي MP4 على 3 ترميزات، mpg4(xdiv),,mpg4(xvid), avc(h264) فقط h264 هو ترميز MP4 القياسي (أنا أيضًا مخدوع هنا، التنسيقات الأخرى تحتوي فقط على صوت ولكن لا تحتوي على صور.) إذا كنت تواجه هذا النوع من المشاكل، ما عليك سوى استخدام محول تنسيق الفيديو لتحويل التنسيق وسيكون الأمر على ما يرام.
يعد تنفيذ الصوت أمرًا بسيطًا للغاية: يستخدم شريط الأدوات هنا شريط الأدوات الافتراضي للمتصفح.
<audio src=htmls/1.mp3 الضوابط=controls حلقة=loop preload=auto >متصفحك لا يدعم عنصر الفيديو</audio>
على الرغم من أنه يمكن استخدام الإعداد الافتراضي للمتصفح لمقاطع الفيديو، إلا أن التخصيص الخاص غير ممكن، لذلك من منظور تقني، لا تزال بحاجة إلى تعلم كيفية إنشاء أدواتك الخاصة لتنفيذ الوظائف (يمكن أن يشير الصوت أيضًا إلى هذه الطريقة).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>وضع الفيديو على صفحة الويب</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 عناصر التحكم=حلقة التحكم=حلقة التحميل المسبق=تلقائي >متصفحك لا يدعم عنصر الفيديو</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 الضوابط=controls loop=loop Poster=3.jpg>متصفحك لا يدعم عنصر الصوت <!-- يحتوي MP4 على 3 ترميزات، mpg4(xdiv),,mpg4(xvid), avc(h264), فقط h264 هو ترميز MP4 القياسي المعترف به-></video><div id=progress></div><!-- التحكم في مستوى الصوت-><input id=volume type=range min=0 max=1 step = 0.1 onchange=Volume(this)><!-- معلومات عن تقدم المعدل والوقت--><span id=rate>1</span>إطار في الثانية <span id=info></span><button onclick=Play(this) id=btn1>تشغيل</button><button onclick=Fast()>تقديم سريع</button><button onclick=Slow()>تقديم بطيء</button><button onclick=Prev() >الرجوع</button><button onclick=Next()>الأمام</button><button onclick=Muted(this)>كتم الصوت</button></body></html>
يتم فصل العرض (html) وتنفيذ الوظيفة (js) واستيرادهما من الخارج.
ControlBar.js
// استخدم البرنامج النصي لاكتشاف دعم علامة المتصفح var support = !!document.createElement(audio).canPlayType;if (!support) {alert(لا يدعم متصفحك تشغيل هذا الفيديو);}// تحديد كائن الفيديو العام var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*الأمام: دقيقة واحدة*/function Next() {e1.currentTime+=10; *تشغيل/إيقاف مؤقت*/تشغيل الوظيفة(هـ) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*تقدم بطيء: عندما يكون أقل من أو يساوي 1، فإنه يتباطأ بمقدار 0.2 فقط في كل مرة؛ وعندما يكون أكبر من 1، فإنه يتناقص بمقدار 1 في كل مرة */function Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *تقدم بطيء: عندما يكون أقل من أو يساوي 1، فإنه يتباطأ بمقدار 0.2 فقط في كل مرة؛ وعندما يكون أكبر من 1، فإنه ينخفض بمقدار 1 في كل مرة */function Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}وظيفة fps2fps(fps) ){إذا(إطار في الثانية<1){عودة fps.toFixed(1);}else{return fps;}}/*Mute*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*ضبط مستوى الصوت*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* معلومات التقدم: التحكم في شريط التقدم وعرض وقت التقدم*/function Progress( ) {فار p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1) .duration);}وظيفة s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ الصورة: ق)؛}/* بعد تحميل صفحة الويب، أضف وظيفة معالجة التقدم إلى حدث التحديث الزمني لكائن الفيديو*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*أضف التقدم إلى وظيفة معالجة حدث window.onload */window.addEventListener(load,Progress);الوظائف المنفذة: التشغيل، والإيقاف المؤقت، والتقديم السريع، والتقديم البطيء، والأمام، والخلف، والتحكم في مستوى الصوت، وشريط التقدم وعرض الوقت. يمكن ملاحظة أنه يمكن تحقيق وظائف أكثر تعقيدًا من خلال خصائص وطرق الصوت أو الفيديو.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.