在這篇文章中，我將展示一個有複製屬性的影片按鈕的程式。當你點擊影片按鈕時，它將會複製預設的文字。

HTML

HTML 部分主要包括一個帶有影片和工具提示的包裹元素。工具提示在滑鼠移過時會顯示，並在滑鼠移出時隱藏。

1
2
3
4
5
6
7
<div class="wrap" id="videoWrap" style="position: relative; display: flex; justify-content: center; align-items: center;">
  <video width="320" height="120" loop muted autoplay>
    <source src="/images/discord.webm" type="video/webm">
  </video>
  <div id="tooltip" style="visibility: hidden; color: rgb(255, 255, 255); background-color: rgba(128, 128, 128, 0.7); 
  padding: 10px; border-radius: 5px; position: absolute; z-index: 1;"> 複製 </div>
</div>

CSS

CSS 部分主要是為影片和包裹元素設定樣式。

1
2
3
4
5
6
7
8
9
#myVideo {
    pointer-events: none;
}
#myVideo:hover {
    pointer-events: auto;
}
.wrap {
    margin-bottom: 10px;
}

JavaScript

JavaScript 部分負責實現影片按鈕的點擊複製和工具提示的顯示與隱藏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const videoWrap = document.getElementById('videoWrap');
const tooltip = document.getElementById('tooltip');

videoWrap.addEventListener('click', function() {
  const value = ' 預設複製的字預設複製的字 ';
  const el = document.createElement('textarea');
  el.value = value;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
});

videoWrap.addEventListener('mouseover', function() {
  tooltip.style.visibility = 'visible';
});

videoWrap.addEventListener('mouseout', function() {
  tooltip.style.visibility = 'hidden';
});


作者: 微風