क्रोम

Question

में

मैं एक साधारण वीडियो

<video src="" controls></video> 

लोड हो रहा है कर रहा हूँ मेरी पृष्ठ पर। वीडियो काम करता है और अच्छी तरह से क्रॉस-ब्राउज़र चलाता है (इस प्रश्न के लिए सभी प्रारूप सेटअप नहीं दिखा रहा है क्योंकि यह प्रासंगिक नहीं है)।

मैं तो वीडियो टैग करने के लिए एक बॉर्डर-त्रिज्या लागू किया है। क्रोम को छोड़कर यह काम करता है। मैं कंसोल को भी खींच सकता हूं और वीडियो टैग पर लागू सीमा-त्रिज्या देख सकता हूं, लेकिन यह सीमा त्रिज्या को प्रतिपादित नहीं कर रहा है।

क्या कोई इस मुद्दे से परिचित है? मैंने इसे क्रोम में एक बग पढ़ा है, लेकिन मुझे यकीन नहीं है कि यह हल हो गया है या यदि कोई कामकाज हो सकता है?

Answer 1

मैं सुनिश्चित नहीं हूं लेकिन मुझे लगता है कि यह है कि क्या "एसवीजी का उपयोग कर" का मतलब है:

विचार एक HTML ओवरले तत्व है कि एक ही चौड़ाई और वीडियो के रूप में ऊंचाई है, कई एसवीजी सेट बनाने के लिए है इस पर पृष्ठभूमि (border-radius की जो कुछ भी पृष्ठभूमि रंग है) और यह "माउस अदृश्य" (pointer-events: none):

डेमो: http://jsfiddle.net/pe3QS/3/

सीएसएस (ऋण एसवीजी के):

#video-container { 
    position: relative; 
} 

#overlay { 
    position: absolute; 
    width: 320px; 
    height: 240px; 
    left: 0; 
    top: 0; 
    pointer-events: none; 
    background-image: url('data:image/svg+xml...'); 
    background-position: top right, top left, bottom left, bottom right; 
    background-repeat: no-repeat; 
} 

HTML:

<div id="video-container"> 
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video> 
    <div id="overlay"></div> 
</div> 

तुम भी एक छद्म-तत्व (video तत्व पर नहीं है, यह प्रदर्शित would'nt) इस्तेमाल कर सकते हैं:

डेमो: http://jsfiddle.net/pe3QS/2/

सीएसएस:

#video-container:after { 
    position: absolute; 
    width: 320px; 
    height: 240px; 
    content: " "; 
..... 

एचटीएमएल:

<div id="video-container"> 
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video> 
</div> 

एसवीजी संशोधित करने के लिए बहुत आसान हैं, बस उनमें से प्रत्येक पर fill विशेषता बदलें।

यह शायद जेएस के माध्यम से भी किया जा सकता है।