এইচটিএমএল 5 অডিও ট্যাগ স্টাইল করা সম্ভব?

Question

কীভাবে এটি করা যায় সে সম্পর্কে আমি কোনও সংস্থান পাইনি। প্লেয়ারের রঙ পরিবর্তন করার মতো সাধারণ কিছু হলেও ভাল লাগবে :)

Comments

আমাকে পুরানো উরলিটজারের ছন্দ বোতামগুলি সম্পর্কে

— ভাবিয়ে

- বিভিন্ন ব্রাউজার অডিও উপাদান styling ভিন্নভাবে প্রতিক্রিয়া stackoverflow.com/a/27765938/325251

— mvark

হ্যাঁ, এবং এটি দেখতে সবচেয়ে খারাপ দেখাচ্ছে। তারা এটিকে কীভাবে খারাপ দেখায়?

— লাইভ-লাভ

ভিডিও স্টাইলিং ক্রস ব্রাউজার উত্তর advprog.blogspot.co.uk/2013/07/…

— মাউসী

@ ৪০-প্রেম: এটি কি গুরুতর প্রশ্ন? এটা মাইক্রোসফ্ট !!

— রিঙ্গো

Answer 1

হ্যাঁ! "নিয়ন্ত্রণ" বৈশিষ্ট্যযুক্ত HTML5 অডিও ট্যাগ ব্রাউজারের ডিফল্ট প্লেয়ার ব্যবহার করে। আপনি এটি ব্রাউজার নিয়ন্ত্রণগুলি ব্যবহার না করে নিজের পছন্দ অনুসারে কাস্টমাইজ করতে পারেন তবে নিজের নিয়ন্ত্রণগুলি ঘূর্ণায়মান এবং জাভাস্ক্রিপ্টের মাধ্যমে অডিও এপিআইয়ের সাথে কথা বলে।

ভাগ্যক্রমে, অন্যান্য লোকেরা ইতিমধ্যে এটি করেছে। আমার এখনই প্রিয় প্লেয়ার জেপ্লেয়ার , এটি খুব স্টাইলযোগ্য এবং দুর্দান্ত কাজ করে। এটা দেখ.

Comments

সুতরাং উত্তরটি "না, এটি সম্ভব নয়, আপনার অবশ্যই কোনও বাহ্যিক প্লেয়ার ব্যবহার করা উচিত"?

— ফার্নান্দো

@ ফার্নান্দো: এটা সত্যিই সম্ভব। এটি প্রশ্নের উত্তর দেয় "এটি কি সম্ভব?"

— ড্যান শ্ননাউ

আপনাকে ধন্যবাদ @ ডেস্কনাউ। আমি আমার মন্তব্য পোস্ট করেছি কারণ প্রশ্নটি এইচটিএমএল 5 ভিডিও ট্যাগ স্টাইলিং সম্পর্কিত , এবং সমস্ত উত্তর কম-বেশি হ্যাঁর মতো , এটি অন্যান্য ট্যাগ ব্যবহার করেও সম্ভব ।

— ফার্নান্দো

তো, আসলেই কি এটি "না"? আপনার নিজের ইউআই রোলিং করা বিদ্যমান মার্কআপের জন্য একই জিনিস নয়।

— বব

এই উত্তরটি সত্যিকার অর্থে কোনও সংস্থার লিঙ্ক। জেপ্লেয়ার চলে গেলে কী হবে ?

— কাইল

Answer 2

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

রেফারেন্স: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F

Comments

দুর্বল উপস্থাপনা কিন্তু সিএসএস নির্বাচক ব্যবহারকারীর!

— benît

আপনি কীভাবে এগুলি ব্যবহার করবেন তা অনুগ্রহ করে দেখতে পারেন? শুধু নমুনা কোড?

— এক্সএমএল

এটি কেবল ওয়েবকিট-ভিত্তিক ব্রাউজারগুলি দ্বারা সমর্থিত (যেমন ফায়ারফক্স, আইই ইত্যাদি নয়)

— gilad mayani

খুব সুন্দর হ্যাকিং, এটি সঠিক উত্তর এবং অনেক ধন্যবাদ! আমি ব্যথা ছাড়াই অডিও ট্যাগের স্টাইল পরিবর্তন করি এবং অতিরিক্ত জেএস কোড, ভিভা ফ্যাবিও

— জাভা এসএম

মনে হচ্ছে, কপি / থেকে আটকানো হতে gist.github.com/afabbro/3759334

— diachedelic

Answer 3

হ্যাঁ: আপনি অন্তর্নির্মিত ব্রাউজার ইউআই লুকিয়ে রাখতে পারেন (এর controlsথেকে বৈশিষ্ট্যটি সরিয়ে দিয়ে audio) এবং এর পরিবর্তে আপনার নিজের ইন্টারফেস তৈরি করতে এবং জাভাস্ক্রিপ্ট ( উত্স ) ব্যবহার করে প্লেব্যাক নিয়ন্ত্রণ করতে পারেন :

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

তারপরে আপনি সিএসএস ব্যবহার করতে ইচ্ছুক উপাদানগুলির স্টাইল করতে পারেন।

MDN HTMLAudioElement এপিআই রেফারেন্স

Comments

নিশ্চয় এই (.play) iOS এ কাজ হিসাবে এটিকে অবরুদ্ধ করবে না (দেখুন stackoverflow.com/questions/31776548/... )

— user1432181

Answer 4

ট্যাগটির উপস্থিতি ব্রাউজার-নির্ভর, তবে আপনি এটি আড়াল করতে, নিজের ইন্টারফেস তৈরি করতে এবং জাভাস্ক্রিপ্ট ব্যবহার করে প্লেব্যাক নিয়ন্ত্রণ করতে পারেন।

Answer 5

কিছু রঙিন টিউনিং

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Comments

প্লেয়ারের মৌলিক রঙগুলি পরিবর্তন করার জন্য এটি একটি দ্রুত এবং নোংরা উপায়, খুব সহজ

— ওয়াকান্দান

আমি সাইন ইন করতে, এইটিকে উজ্জীবিত করতে এবং "আপনাকে ধন্যবাদ" বলতে আমার লগইন শংসাপত্রগুলি বন্ধ করে দিয়েছি।

— মার্ক আমোস

Answer 6

আপনাকে আপনার নিজের প্লেয়ার তৈরি করতে হবে যা এইচটিএমএল 5 অডিও উপাদানটির সাথে ইন্টারফেস করে। এই টিউটোরিয়ালটি http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with- জাভাস্ক্রিপ্ট

Answer 7

কেন ঠিক আছে।

একটি cssট্যাগ:

audio {

}

আপনি কিছু ফলাফল পাবেন। দেখে মনে হচ্ছে এটি প্লেয়ারটি 25px এর উপরে বা নীচে কোনও উচ্চতা চায় না তবে প্রস্থটি কিছুটা ছোট বা লম্বা করা যেতে পারে।

এটি আমার পক্ষে যথেষ্ট ছিল; এই উদাহরণটি দেখুন (সতর্কতা, অডিও স্বয়ংক্রিয়ভাবে প্লে হয়): www.thenewyorkerdeliinc.com

Comments

আমার কাছে একটি বড় সমস্যা হ'ল ইন্টারনেট এক্সপ্লোরার। এটি অন্য ব্রাউজার প্লেয়ারের তুলনায় ভয়ানক এবং ভিন্ন বর্ণ এবং অনেক বড় আকারের দেখাচ্ছে, যদিও প্রস্থটি 150px এ সেট করা হয়েছে

— রিঙ্গো

আপনার যদি আইই 9 + প্লেয়ারকে একটি ছোট জায়গায় getুকতে হয় তবে 25px উচ্চতা এবং 100px প্রস্থ আমার জন্য কাজ করেছে। আমার মনে হয় 25px এর উচ্চতা কী ছিল তবে বৃহত্তর সংখ্যা যে কোনও কারণে কার্যকর হয়নি।

— রিঙ্গো

দুর্ভাগ্যক্রমে লিঙ্কটি নিচে

— নেমেছে

Answer 8

প্লেয়ারের রঙ বদলাতে কেবল আপনার সিএসএস ফাইলে অডিও ট্যাগটি সম্বোধন করুন, উদাহরণস্বরূপ আমার কোনও সাইটে প্লেয়ারটি অদৃশ্য হয়ে গেছে (সাদা রঙের সাদা) তাই আমি যুক্ত করেছি:

audio {
    background-color: #95B9C7;
}

এটি খেলোয়াড়কে হালকা নীল করে দিয়েছে।

Comments

এটি আমার প্লেয়ারের রঙ পরিবর্তন করে না, এটি কেবল এর পিছনে একটি পটভূমি রঙ রাখে। কোন ধারণা কেন?

— টম

@ টম কারণ এই সমাধানটি প্লেয়ারের ডিফল্ট ধূসর ব্যাকগ্রাউন্ড পরিবর্তন করার জন্য নয় :-) আমার জন্য আপনার হিসাবে একই ফলাফল।

— ফ্লোরিয়ান দোয়েন

Answer 9

হ্যাঁ, এটি সম্ভব, @ ফ্যাবিও জাঙ্গিরোলামির উত্তর থেকে

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

Comments

ফায়ারফক্স 77 এ কাজ করে না

— হেনরি

Answer 10

আপনি যদি সিএসএসে ব্রাউজারগুলির মানক সঙ্গীত প্লেয়ারকে স্টাইল করতে চান:

audio {
    enter code here;
}

Comments

সম্পূর্ণ বিবরণটি খুব সহজ নয় এবং আমি সমস্ত উপাদান অডিওকে স্টাইল করার জন্য এইভাবে ব্যবহার করতে পারি

— ডেভড আসলানিফাকর

এমনকি এই উত্তরের একটি কার্সারি চেক প্রকাশ পেয়েছে যে এটি ভুল।

— আইজাক লুবো