2 
 <video id="videodisplay-0" class="js-play" crossorigin="anonymous">
    <source src="things.mp4" type="video/mp4">
    <track label="English" kind="captions" srclang="en" default="" src="test.vtt">
 </video>

上は、キャプション トラックを含む、私のページの HTML5 ビデオ セグメントです。

私はこのCSSを持っています

::cue { visibility: hidden;}

Chrome、Opera、および Safari では、この CSS はブラウザーが表示するデフォルトのキャプションを非表示にし、その後、キャプションがプログラムによって表示されます。

Firefox と IE は現在、疑似要素をサポートしていないため、::cueこれらのブラウザーに対してプログラムで表示しているキャプションを非表示にできるようにする必要があります。

私の最初のアイデアは、ブラウザーが疑似要素をサポートしていない場合にコードを実行する (キャプションを非表示にする) ことですが::cue、これは JavaScript でも SASS でも実現できませんでした。

::cueブラウザーが疑似要素をサポートしていないことを検出するにはどうすればよいですか?

4

1 に答える 1

2

疑似要素が設定された要素を作成したり、<style>要素を作成したり、と要素の両方を に追加したり、疑似要素のプロパティを取得するために使用したりでき ます。プロパティの が空の文字列の場合、疑似要素はブラウザでサポートされていません。video::cue<video>stylevideodocumentwindow.getComputedStyle()video ::cueResolved value::cue

資力

function cueSupported() {
  var video = document.createElement("video");
  var style = document.createElement("style");
  style.textContent = "video::cue {background: inherit}";
  document.body.appendChild(style);
  document.body.appendChild(video);
  var cue = window.getComputedStyle(video, "::cue").background;
  document.body.removeChild(style);
  document.body.removeChild(video);
  delete style; 
  delete video;
  return !!(cue.length);
}

if (cueSupported()) {
  console.log("::cue pseudo element supported")
} else {
  console.log("::cue pseudo element not supported")
}

plnkr http://plnkr.co/edit/UzD41KjUARGEoncRxD5x?p=preview

于 2016-12-09T22:10:05.250 に答える