打开视频内容的模板文件 ... single-video.php ... 在这个文件的 while 循环里,我们可以嵌入视频播放器 ...嵌入 jwplayer 播放器需要特定的代码,你可使用 jwplayer 设置向导来生成相应的代码 ....
http://www.longtailvideo.com/jw-player/wizard/
首先,我们需要为播放器创建一个容器 ... 可以使用一组 <div> 标签 ...
<div></div>,在这组 <div> 标签上,需要定义一个 ID,jwplayer 会使用这个 ID 找到这个窗口,然后把播放器放在里面 ...
如果你打算在同一个页面上,使用多个播放器,那么这个 ID 不能重名 ...
我们可以使用一个自定义字符,再加上文章的 ID来命名这个播放器窗口的 ID 。
输出当前内容的 ID ,可以使用 the_ID() ...
<?php the_ID(); ?> ...
在它的前面,再加上一个 player- ,这样播放器窗口的 ID 就是,player- ,再加上文章内容的 ID。
在它的下面是播放器的相关的设置 ... 这些设置是 javascript 代码 ... 先输入 ...
<script type="text/javascript">
</script>
在它的里面,再输入 ...
jwplayer().setup({
})
在 jwplayer 后面的括号里是播放器容器的 ID ,先是一个 player-,然后是 <?php the_ID(); ?>
jwplayer("player-<?php the_ID(); ?>")
在 setup 后面的大括号里,就是播放器的相应的设置 ... 在这里,你要告诉视频文件的位置,封面图像,播放器的宽度,高度,使用的皮肤等等 ...
先输入一个 file: " ",
在这个参数里,是视频文件的位置 ... 这个视频文件的位置就是使用 上传视频 字段上传的那个视频 ... 可以使用 the_field() 来输出自定义字段的值 ... 里面要加上想要输出的自定义字段的名称 ... 上传视频字段的名称是 upload-video
<?php the_field( 'upload-video' ); ?> ...
另起一起,再输入 image: "",
image 参数里的东西就是视频的封面图像 ... 也就是视频在没有播放的时候,显示的那个图像 ...
这个参数的值,我们可以使用 视频封面 字段上传的图像的地址...
这里我们可以先做一点处理,可以使用 wordpress 的 wp_get_attachment_image_src() 获取到图像的地址 ...
在这段代码的上面,输入 ... 先用 get_field() 获取到视频封面字段的图像 id ... 可以把这个 id 再交给一个变量 ... 然后再用 wp_get_attachment_image_src() ,获取到指定的图像 id 和尺寸的相关信息 ... 这些信息会在一个数组里 ... 里面包含图像的地址,还有图像的宽度和高度 ...
我们也可以把获取到的信息再交给一个变量 ... 交给 $video_cover ...
<?php
$video_cover_id = get_field( 'video-cover' );
$video_cover = wp_get_attachment_image_src( $video_cover_id, 'video_cover' );
?>
然后在播放器设置的 image 参数,也就是视频封面参数里,可以使用一段 php 代码,输出视频封面字段的图像地址 ... 前面我们已经把获取到的信息交给了 $video_cover 这个变量 ... 这个变量是一个数组 ... 在这个数组里,第一个位置上的信息就是图像的地址 ...
<?php echo $video_cover[0]; ?>
数组的第一个位置的序号是 0 ,这行代码的意思就是,输出 $video_cover 数组里的第一个位置的信息 .. 也就是图像的地址 ...
另起一行,再设置一下播放器的宽度 ...
width: "624",
再设置一下播放器的高度 ...
height: "300"
保存 ... 回到网站的前台 ... 打开一个视频内容 ....
在内容页面上,你会看到一个播放器 ... 视频没有播放的时候,会显示使用 视频封面 字段上传的图像 ...
点击 播放 ... 可以在线播放使用 上传视频 字段上传的视频文件 ...