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=360
|height=auto
}}
}}
</pre>
</pre>
第10行： 第10行：
|url=https://vip.123pan.cn/1826204916/5651071
|url=https://vip.123pan.cn/1826204916/5651071
|width=640
|width=640
|height=360
|height=auto
}}
}}


This widget lets you embed '''[https://github.com/etianen/html5media HTML5 Video Media]''' on your wiki page.
This widget allows you to embed '''[https://github.com/etianen/html5media HTML5 Video Media]''' directly onto your wiki page.


It was created by [https://www.mediawikiwidgets.org/User:Taipan taipan].
It was created by [https://www.mediawikiwidgets.org/User:Taipan taipan].


== Using this widget ==
== Using this widget ==
See [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].
For detailed instructions on how to use this widget, please refer to the [https://www.mediawikiwidgets.org/Video widget description page on MediaWikiWidgets.org].


== Copy to your site ==
== Copy to your site ==
Install [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source] to '''{{FULLPAGENAME}}'''.
To use this widget on your own wiki, you'll need to install the [https://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension]. Once installed, copy the [{{fullurl:{{FULLPAGENAME}}|action=edit}} complete source code] of this page to your wiki as a page named '''{{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-container {
  position: relative;
    position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
    /* width is set by the video element itself or widget parameters */
  width: 100%;
    height: px;
  margin-bottom: 15px;
    margin-bottom: 15px;
}
    display: flex;
 
    justify-content: center;
.video-player, .video-load-btn {
    align-items: center;
  position: absolute;
    background-color: #000; /* Black background for video area */
  top: 0;
   }
  left: 0;
  .video-load-btn {
  width: 100%;
    position: absolute;
   height: 100%;
    top: 50%;
}
    left: 50%;
 
    transform: translate(-50%, -50%);
.video-load-btn {
    padding: 10px 20px;
  display: flex;
    background: #4285f4;
  align-items: center;
    color: white;
  justify-content: center;
    border: none;
  font-size: 18px;
    border-radius: 4px;
  background: #4285f4;
    cursor: pointer;
  color: white;
    z-index: 10;
  border: none;
    font-size: 16px;
  border-radius: 6px;
    font-weight: bold;
  cursor: pointer;
    transition: background 0.3s ease;
  z-index: 2;
  }
  transition: background 0.3s;
  .video-load-btn:hover {
}
    background: #3367d6;
.video-load-btn:hover {
  }
  background: #3367d6;
  .video-player {
}
    max-width: 100%; /* Ensure video scales within its container */
 
    max-height: 100%; /* Ensure video scales within its container */
.video-player {
    display: none; /* Hidden by default until loaded */
  display: none;
  }
  object-fit: cover;
}
</style>
</style>


<div class="video-container"  
<div class="video-container" style="width: px;">
    data-url="<!--{$url|validate:url|escape:'html'}-->"
   <button class="video-load-btn"
    data-width="<!--{$width|default:640|validate:int|escape:'html'}-->"
          onclick="this.nextElementSibling.style.display='block'; this.nextElementSibling.src=''; this.remove()">
    data-height="<!--{$height|default:360|validate:int|escape:'html'}-->">
    ▶ Load Video
   <button class="video-load-btn" onclick="loadWidgetVideo(this)">▶ Load Video</button>
  </button>
   <video class="video-player" controls preload="none"></video>
   <video class="video-player"
        width=""
        height=""
        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:46的版本

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

This widget allows you to embed HTML5 Video Media directly onto your wiki page.

It was created by taipan.

Using this widget

For detailed instructions on how to use this widget, please refer to the widget description page on MediaWikiWidgets.org.

Copy to your site

To use this widget on your own wiki, you'll need to install the MediaWiki Widgets extension. Once installed, copy the complete source code of this page to your wiki as a page named Widget:视频.

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