如何优雅又简易地插入各大长视频网站

参考资料
2024-06-09 14:11
心情有点愉快
热度34382
本文共计2020字
预计阅读11分钟

我最近重新梳理了一下嵌入多媒体的想法，WordPress 本身的嵌入不支持国内网站，在越来越闭塞的当下，我想官方也不会再支持了。而调用 API，维护起来又十分不易，索性直接使用公开的 iframe 以最优雅的方式调用。

适用于所有站点

HTML 和 CSS 调用格式

<!-- HTML -->
<iframe src="" class="thyuu-video" allowfullscreen></iframe>
<!-- 在 src 输入第三方视频网站提供的链接地址。官方提供的 iframe 其他内容可以删除，按照上述方式直接插入即可 -->

<!-- CSS -->
<style>
	.thyuu-video {
		width: 100%;		// 如果不想使用自适应，就输入固定的大小
		max-width: 100%;	// 避免在特定情况下溢出
		border: 0;		// 去除浏览器默认风格
		border-radius: 1em;	// 圆角风格
		aspect-ratio: 16 / 9;	// 自适应比例
	}
</style>

在大部分视频的 iframe 都会固定死 width 和 height，而在我的设计中，对 iframe 调用时重置样式，设计自适应 16/9 的比例。将上述 CSS 复制你的样式表中，并按我的 HTML 格式调用。如此一来的几行代码，就避免出现宽度溢出、手机版高度过高、PC 版过低的情况。十分优雅。

适用于 WordPress 站点

对于动态博客可以使用动态调用，WordPress 的短代码在这里就相得益彰地展现出来了，它可以根据参数返回多种视频网站的 HTML，因此在后期维护起来十分方便，一方面不用输入大量代码节省资源，另一方面如果第三方更换调用策略，也可以一键更改，总比 SQL 数据替换强的多。

定义短代码

在主题 functions.php 定义短代码

function thyuu_video($atts) {
	// 定义参数
	$atts = shortcode_atts(array(
		'id' => '',
		'type' => ''
	), $atts);

	$id = $atts['id'];
	$type = $atts['type'];

	// 根据类型调用不同视频网站
	$src = '';
	switch ($type) {
		case 'bb':
			$src = 'https://player.bilibili.com/player.html?aid='.$id.'&autoplay=0';
			break;
		case 'qq':
			$src = 'https://v.qq.com/txp/iframe/player.html?vid='.$id;
			break;
		case 'yk':
			$src = 'https://player.youku.com/embed/'.$id;
			break;
		case 'xg':
			$src = 'https://www.ixigua.com/iframe/'.$id.'?autoplay=0';
			break;
		case 'sh':
			$src = 'https://tv.sohu.com/s/sohuplayer/iplay.html?bid='.$id.'&disablePlaylist=true&autoplay=0';
			break;
		default:
			return '<div>该视频参数错误</div>';
	}
	return '<iframe src="'.$src.'" class="thyuu-video" allowfullscreen></iframe>';
}
add_shortcode('thyuu-video', 'thyuu_video');

短代码示例

[thyuu-video type=xg id=7372058098166399500]

短代码参数

在 WordPress 使用短代码区块按示例格式填写，$type 如果不填写会返回错误提示，目前接受以下参数

代码及项目无前置广告可高清播放
bb B 站视频✅❌
qq 腾讯视频❌❌
yk 优酷视频✅✅
xg 西瓜视频✅✅
sh 搜狐视频❌❌

在实际类比中，我尽可能地遍寻国内视频网站，发现大部分已经关闭了调用，他们甚至连 iframe 都吝啬到不提供，十分闭塞。我一时想起当年的土豆网，无论是界面还是服务都很不错。回到当下，从普通人和自媒体使用长视频的角度来看，在 B 站和西瓜视频上传自己的视频更多一些。点赞咱国民 APP 西瓜视频，不仅没有前置广告，还可以在 iframe 直接高清播放，这点 B 站都不行。接下来，咱们看看调用效果。

调用效果

结语

我一般很少去分享代码折腾的内容，网络上的大神太多轮不到我班门弄斧 😂 不过如果缺少优雅，那就优雅一下。视频“效果”也很不错，娱乐之际，祝大家端午安康。

最近可能要备案其他域名，如果 www.thyuu.com 出现无法访问的情况，可以访问blog.tanhongyu.com临时替代一下，除了配色不一样，没有不同 😉 如果这也不能访问，那可能是管控严重，现在网站插入视频和音乐是不允许个人备案的。