给自定义文章类型:视频内容页增加一个视频自动播放功能

  • A+
所属分类:建博笔记
摘 要

主题默认的自定义文章类型:视频内容页默认模板类似普通的内置文章类型的内容页,从首页或分类列表页或其他地方点击具体的文章后,进入到内容页时显示的是一篇以视频为主的内容,这让视频内容页看上去不像是一个视频内容页的样子,总觉得怪怪的。
我自己理解的视频内容页应该是别人点击具体的文章后,首先看到的应该是一个自动播放视频的窗口,类似优酷音乐、音悦台那种,然后才是其他和这个视频有关的内容。毕竟,别人愿意点击某篇视频文章,说明他对这篇视频文章的这个视频有兴趣,所以应该先把这个视频放在前面并自动播放,而不是像普通文章一样,千篇一律的一个标题,然后是一堆内容。我觉得这样可以更进一步的提升用户体验,同时也可以进一步丰富博客的排版、样式。

演示地址:点击这里,点击任何一篇文章即可查看效果。

操作方法

1、添加视频自动播放函数

打开【inc/thumbnail.php】文件,在适当位置添加代码

function videos_autoplay() {
	global $post;
	if ( get_post_meta($post->ID, 'big', true) ) {
		$video_url = get_post_meta($post->ID, 'big', true);
		echo '<div class="video-autoplay">';
		echo '<iframe id="video-autoplay" width="100%" src="'.$video_url.'" frameborder=0 allowfullscreen="allowfullscreen" align="middle" scrolling="no"></iframe>';
		echo '<script type="text/javascript">document.getElementById("video-autoplay").style.height=document.getElementById("video-autoplay").scrollWidth*0.563+"px"</script>';
		echo '</div>';
	}
}

代码解释:

  • 为了便于管理,我把这个函数添加在了【inc/thumbnail.php】文件中的【视频缩略图函数】的后面,理论上也可以添加在主题目录下的【functions.php】文件或【inc/function.php】文件中
  • 该函数主要就是调用视频文章编辑页面中的【视频设置】模块里的【添加视频代码】中添加的视频地址,然后通过【iframe】标签及其几个属性实现自动播放
  • 对于视频地址,我只测试了优酷视频的地址,其格式为 http://player.youku.com/embed/视频 ID,其他网站的视频我没做测试。不过,以.swf 格式结尾的地址貌似不行
  • 使用【iframe】标签可以使视频在 PC 端和移动端都能正常显示并播放,使用【embed】标签的话,好像移动端不能正常显示并播放
  • 默认情况下,PC 端是自动播放(窗口模式),移动端是需要点击后才会播放(全屏模式),这个好像和调用的视频网站有关,不是只靠几个属性就可以控制的
  • 【iframe】标签的宽度为 100%,高度为宽度的 0.563 倍。这个主要是考虑到视频窗口在移动端的显示上也成比例,如果把高度写死了,在移动端的显示就比较难看。网上有另一种思路是通过wp_is_mobile()函数来判断是 PC 端还是移动端,然后把高度写死,那样一来的话,像平板这种介于 PC 端和移动端两者之间的这个设备尺寸,他的宽高比就不成比例,同样会比较难看

 

2、添加前台播放模块

打开【single-video.php】文件,在

<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

的下面添加

<?php if ( get_post_meta($post->ID, 'big', true) ) {
	videos_autoplay();
} ?>

代码说明:

  • 视频内容页调用的是【single-video.php】这个文件,通过判断来调用视频自动播放函数。如果后台不添加视频地址的话,前台就不输出这个自动播放窗口,这样便于管理,也更加灵活一些。

完成以上步骤后,在视频文章编辑页面的【视频设置】模块中的【输入视频代码】中添加视频地址就可以了。

 

其他说明

  • 主题默认已经集成了【smartideo】插件,本来想直接调用这个插件来实现这个功能的,因为这个插件支持更多的视频网站和音乐网站,而且对 PC 端和移动端的支持也更好。但由于我能力有限,尝试了好久都未能成功调用这个插件,后来就放弃了。如果哪位童鞋有能力,可以写个函数直接调用这个插件,同时也可以分享一下你的成果
  • 后来也考虑过添加短代码,通过调用短代码来实现这个功能,但考虑到使用短代码会和主题中集成的 smartideo 插件冲突,所以也就放弃了
  • 如果网站启用了 HTTPS,视频内容页的绿色小锁图标会有黄色感叹号提示,表示当前页面载有混合内容(即 HTTPS 和 HTTP 内容),这个和视频网站是否支持 HTTPS 有关。像优酷网站,即使我把地址改成 HTTPS 也没用,因为他内部调用的还是 HTTP。而腾讯视频就支持 HTTPS,但腾讯视频的播放窗口太难看了,所以综合考虑了以后我还是选择了优酷视频。童鞋们可以自由选择使用哪个视频网站
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: