Widget:视频：修订间差异

来自HUIJIA FUN
可视化wikitext
小无编辑摘要
无编辑摘要
标签：已被回退
第4行： 第4行：
|url=https://vip.123pan.cn/1826204916/5651071
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=auto
|height=360
}}
}}
</pre>
</pre>
第10行： 第10行：
|url=https://vip.123pan.cn/1826204916/5651071
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=auto
|height=360
}}
}}


第18行： 第18行：


== Using this widget ==
== Using this widget ==
For information on how to use this widget, see [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].
See [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].


== Copy to your site ==
== Copy to your site ==
To use this widget on your site, install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} complete source code] of this page to your wiki as page '''{{FULLPAGENAME}}'''.
Install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source] to '''{{FULLPAGENAME}}'''.
</noinclude><includeonly>
</noinclude><includeonly>
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
<style>
<style>
  .video-container {
.video-player {
    position: relative;
  display: none;
    width: <!--{$width|default:425|validate:int|escape:'html'}-->px;
  width: 100%;
    height: <!--{$height|default:355|validate:int|escape:'html'}-->px;
  height: 100%;
    margin-bottom: 15px;
  object-fit: cover;
  }
}
  .video-load-btn {
.video-load-btn {
    position: absolute;
  /* 保持基础样式 */
    top: 50%;
  position: absolute;
    left: 50%;
  top: 0;
    transform: translate(-50%, -50%);
  left: 0;
    padding: 10px 20px;
  width: 100%;
    background: #4285f4;
  height: 100%;
    color: white;
  background: #4285f4;
    border: none;
  color: white;
    border-radius: 4px;
  border: none;
    cursor: pointer;
  font-size: 18px;
    z-index: 10;
  cursor: pointer;
   }
  border-radius: 6px;
  .video-load-btn:hover {
  z-index: 2;
    background: #3367d6;
   /* 移除任何可能的动画或渐变 */
  }
  transition: none;
  .video-player {
}
    width: 100%;
.video-load-btn:hover {
    height: 100%;
  background: #3367d6;
    display: none;
}
  }
</style>


<div class="video-container">
  <!-- Button will be removed after click -->
  <button class="video-load-btn"
          onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src='<!--{$url|validate:url|escape:html|regex_replace:"#^(?!(https?:)?//).*#i":''}-->'; this.remove()">
    ▶ Load Video
  </button>
  <!-- Video element (hidden by default) -->
  <video class="video-player"
        width="<!--{$width|default:425|validate:int|escape:'html'}-->"
        height="<!--{$height|default:355|validate:int|escape:'html'}-->"
        controls
        preload="none"></video>
</div>
</div>
<script>
function loadWidgetVideo(button) {
  const container = button.closest('.video-container');
  const video = container.querySelector('.video-player');
  const url = container.dataset.url;
  const width = container.dataset.width;
  const height = container.dataset.height;
  if (url) {
    video.src = url;
    video.style.display = 'block';  // 无动画直接显示
    video.width = width;
    video.height = height;
    button.remove();
  } else {
    button.textContent = '⚠️ Video URL Missing';
  }
}
</script>
</includeonly>
</includeonly>

2025年7月5日 (六) 03:44的版本

{{#widget:视频
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|height=360
}}

This widget lets you embed HTML5 Video Media on your wiki page.

It was created by taipan.

Using this widget

See widget description page on MediaWikiWidgets.org.

Copy to your site

Install MediaWiki Widgets extension and copy the full source to Widget:视频.

取自“https://huijia.fun/index.php?title=Widget:视频&oldid=1546”