Yacc
Flowplayer в кляре.
Для приготовления, помимо перечисленного в
предыдущем рецепте, нам понадобится
плагин Content. Этот плагин предназначен для вывода произвольного HTML кода поверх плеера. Здесь используется для вывода рекламы.
Идём по ссылке, качаем архив с плагином. Из всего архива нам нужен только один файл: flowplayer.content-3.2.0.swf, который надо положить в папку flowplayer в папке темы.
Ещё понадобится кнопка, фигурирующая в коде под именем play_large.png:
В конец functions.php добавляем
define( 'FLOWPLAYER_DIR', get_bloginfo( 'template_url' ) . '/flowplayer/' );
define( 'FLOWPLAYER_CORE_JS', FLOWPLAYER_DIR . 'flowplayer-3.2.6.min.js' );
define( 'FLOWPLAYER_PLAYER_SWF', FLOWPLAYER_DIR . 'flowplayer-3.2.7.swf' );
define( 'FLOWPLAYER_CONTROLS_SWF', FLOWPLAYER_DIR . 'flowplayer.controls-3.2.5.swf' );
define( 'FLOWPLAYER_CONTENT_SWF', FLOWPLAYER_DIR . 'flowplayer.content-3.2.0.swf' );
wp_register_script( 'flowplayer', FLOWPLAYER_CORE_JS );
if ( !is_admin() ) wp_enqueue_script( 'flowplayer' );
add_shortcode( 'flowplayer', 'yacc_flowplayer' );
function yacc_flowplayer( $atts ) {
extract( shortcode_atts( array(
'video' => '',
'image' => '',
'id' => 'player-' . uniqid(),
'width' => 320,
'height' => 240,
'stop_after' => 1000,
'ad' => '',
'title' => '',
'description' => '',
'caption' => ''
), $atts ) );
if( $video == '' ) return;
if( $image == '' ) { ?>
<p>
<a href="<?php echo $video; ?>" style="display:block;<?php echo 'width:'.$width.'px; height:'.$height.'px;'; ?>" id="<?php echo $id; ?>"></a>
<?php echo yacc_flowplayer_setup( $id, $width, $height, $stop_after, $ad ); ?>
</p><?php
}
else { ?>
<style>
.player {
height:<?php echo $height; ?>px;
width:<?php echo $width; ?>px;
cursor:pointer;
text-align:center;
}
.player img {
margin-top:<?php echo ( $height - 83 ) / 2; ?>px;
}
.player .meta {
height:40px;
color:#fff;
background:#000;
opacity:0.7;
margin-top:<?php echo ( $height - 83 ) / 2 - 55; ?>px;
padding:5px;
font-family:"bitstream vera sans","trebuchet ms";
font-size:12px;
line-height:14px;
}
.player .meta .video-title {
text-transform: uppercase;
}
.player .meta .video-description {
}
.player .meta .video-caption {
color:#99FF99;
}
</style>
<div class="player" id="<?php echo $id; ?>" href="<?php echo $video; ?>"
style="background: url(<?php echo $image; ?>);">
<img src="http://example.com/wp-content/uploads/2011/05/play_large.png" alt="Play this video" />
<div class="meta">
<div class="video-title">
<?php echo $title; ?>
</div>
<div class="video-description">
<?php echo $description; ?>
</div>
<div class="video-caption">
<?php echo $caption; ?>
</div>
</div>
</div>
<p>
<?php yacc_flowplayer_setup( $id, $width, $height, null, $ad ); ?>
</p><?php
}
}
function yacc_flowplayer_setup( $id, $width, $height, $stop_after, $ad ) { ?>
<script>
bufferingStopped['<?php echo $id; ?>'] = false;
flowplayer("<?php echo $id; ?>", "<?php echo FLOWPLAYER_PLAYER_SWF; ?>", ({
onLoad: function() {
},
clip: {
autoPlay: true,
autoBuffering: false,
onStart: function() {<?php
if( $stop_after > 0 ) { ?>
setTimeout( function() {
stopBuffering( '<?php echo $id; ?>' ) },
<?php echo $stop_after; ?>
);<?php
} ?>
}
},
plugins: {
controls: {
url: '<?php echo FLOWPLAYER_CONTROLS_SWF; ?>',
autoHide: 'never',
play: true,
volume: true,
mute: true,
time: true,
stop: true,
fullscreen: true,
scrubber: true
}<?php if( $ad != '' ) : ?>,
content: {
url: '<?php echo FLOWPLAYER_CONTENT_SWF; ?>',
top: 0,
left: 0,
height: 30,
width: <?php echo $width; ?>,
border: 0,
borderRadius: 0,
backgroundColor: '#000000',
textAlign: 'center',
style: {
'.ad': {
fontSize: 14,
fontFamily: 'verdana,arial,helvetica',
color: '#ffffff',
},
'.ad-link': {
color: '#ffff33'
}
},
html: '<div class="ad"><?php echo str_replace( "'", '"', $ad ); ?></div>',
onClick: function() {
}
}<?php endif; ?>
}
}))
</script>
<?php
}
add_filter( 'media_send_to_editor', 'yacc_media_send_to_editor', 10, 2 );
function yacc_media_send_to_editor( $html, $id ) {
$attachment = get_post( $id );
$mime_type = $attachment->post_mime_type;
if( substr( $mime_type, 0, 5 ) == 'video' ) {
$meta = wp_get_attachment_metadata( $id );
$html = '[flowplayer';
$html .= ' video="' . $attachment->guid . '"';
$html .= ' id="player-' . uniqid() . '"';
$html .= ' width="' . $meta['width'] . '"';
$html .= ' height="' . $meta['height'] . '"';
$html .= ' stop_after="' . $meta['stop_after'] . '"';
$html .= ' image="' . $meta['image'] . '"';
$html .= ' caption="' . $attachment->post_excerpt . '"';
$html .= ' description="' . $attachment->post_content . '"';
$html .= ' title="' . $attachment->post_title . '"';
$html .= ' ad="' . $meta['ad'] . '"]';
}
return $html;
}
add_filter('attachment_fields_to_edit', 'yacc_attachment_fields_to_edit', 10, 2 );
function yacc_attachment_fields_to_edit( $form_fields, $post ) {
if ( substr( $post->post_mime_type, 0, 5 ) == 'video' ) {
$meta = wp_get_attachment_metadata( $post->ID );
$form_fields['player_id']['label'] = 'Player ID';
$form_fields['player_id']['value'] = 'player-' . uniqid();
$form_fields['player_id']['class'] = 'text';
$form_fields['image']['label'] = 'Splash Image';
$form_fields['image']['value'] = isset( $meta['image'] ) ? $meta['image'] : '';
$form_fields['image']['class'] = 'text';
$form_fields['width']['label'] = 'Width';
$form_fields['width']['value'] = isset( $meta['width'] ) ? $meta['width'] : '320';
$form_fields['width']['class'] = 'text';
$form_fields['height']['label'] = 'Height';
$form_fields['height']['value'] = isset( $meta['height'] ) ? $meta['height'] : '240';
$form_fields['height']['class'] = 'text';
$form_fields['stop_after']['label'] = 'Stop after';
$form_fields['stop_after']['value'] = isset( $meta['stop_after'] ) ? $meta['stop_after'] : '1000';
$form_fields['stop_after']['class'] = 'text';
$form_fields['ad']['label'] = 'Ad';
$form_fields['ad']['value'] = isset( $meta['ad'] ) ? $meta['ad'] : '';
$form_fields['ad']['input'] = 'textarea';
$form_fields['ad']['class'] = 'text';
}
return $form_fields;
}
add_filter( 'attachment_fields_to_save', 'yacc_attachment_fields_to_save', 10, 2 );
function yacc_attachment_fields_to_save( $post, $attachment ) {
if ( substr( $post['post_mime_type'], 0, 5 ) == 'video' ) {
$meta = wp_get_attachment_metadata( $post['ID'] );
$meta['player_id'] = $attachment['player_id'];
$meta['width'] = $attachment['width'];
$meta['height'] = $attachment['height'];
$meta['stop_after'] = $attachment['stop_after'];
$meta['image'] = $attachment['image'];
$meta['ad'] = $attachment['ad'];
wp_update_attachment_metadata( $post['ID'], $meta );
}
return $post;
}
В header.php в секцию head, желательно непосредственно перед вызовом wp_head(), добавляем:
<script>
var bufferingStopped = new Object();
function stopBuffering ( id ) {
if( !bufferingStopped[id] ) {
$f().stopBuffering();
bufferingStopped[id] = true;
}
}
</script>
Теперь форма добавления видео выглядит так
Title, Description, Caption - Будут показаны только если указана картинка.
Link URL - Не используется.
Player ID - Уникальный ID. Вставляется автоматически.
Splash Image - Можно указать картинку.
Width - Ширина плеера в пикселях. По умолчанию 320.
Height - Высота плеера в пикселях. По умолчанию 240.
Stop after - Время в миллисекундах, по истечении которого воспроизведение будет остановлено. При этом изображение останется. Если не указано или равно 0 - значит auto play. Используется только если не указана картинка. По умолчанию 1000.
Ad - Реклама. Текст или HTML. Используйте одинарные кавычки!
Пара примеров.
Картинка, кнопка, описание:
[flowplayer video="http://example.com/wp-content/uploads/2011/05/N8inpasadena-Flowers457.flv" id="player-4dc423dedf5d7" image="http://example.com/wp-content/uploads/2011/05/70930.jpg" caption="Caption Caption" description="Description Description Description Description" title="Title Title"]
Первый кадр и реклама:
[flowplayer video="http://example.com/wp-content/uploads/2011/05/N8inpasadena-Flowers457.flv" id="player-4dc4267c57a54" stop_after="1000" ad="Visit this <a class='ad-link' href='/'>amazing site</a>!"]
Последний раз редактировалось: Yacc (31/05/11 в 09:07), всего редактировалось 1 раз