如何制作首页视频播放？

时间：2013-07-19 作者：van abel

我想在访问者进入我的wp博客之前添加一段视频（自动播放）（可能只是主页，而不是每篇文章），这怎么可能呢？我认为javascript可能是最好的选择？

你能详细地给出你的解决方案吗（无论js与否）？

编辑：

过了一段时间，我认为这应该对我有用，但事实并非如此，为什么？

document.write(\'<style type="text/css">\\n\\
 #wrapper, #header, #footer{ display:none;}\\n\\
 </style>\\n\\
 <video id="loadDiv" preload="auto" data-setup="{}" loop="loop"\\
 webkit-playsinline="" style="position: absolute; width: 100%" autoplay=""\\
  src="http://srcofvideo">\\
 </video>\'
);

window.onload = function() {
 setTimeout(function () {
document.getElementById("loadDiv").style.display = "none";  
document.getElementById("wrapper").style.display = "block";
     document.getElementById("header").style.display = "block";
     document.getElementById("footer").style.display = "block";
 },10000)}

3 个回复

SO网友:Zendrik

My suggestion :

<在WordPress主题内制作一个特定的视频启动模板，并添加一个链接，以访问站点的其余部分

Technical details :

*使用并修改此代码制作视频飞溅模板，并将其另存为“splash.php”，然后将其放入Wordpress主题文件夹中-更多背景信息可在此处找到：http://codex.wordpress.org/Page_Templates -->*

<?php
/*
Template Name: Splash
*/
?>
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Pe Vermeersch</title>
    <meta name = "description" content="My website"/>
    <meta name = "keywords" content="My keywords"/>
    <link rel="stylesheet" type="text/css" href="css/video.css" />

<style type="text/css">
<!--
body {
background-image: url(\'images/background.jpeg\');
background-color: #000000;
}
.style2 {color: #666666}

.style1 {
color: #999999;
font-family: Arial, Helvetica, sans-serif;
}
    </style>
<!--SPLASH page -->
</style><title>Splash</title></head>

<body>
<!--Just change video source here, leave type="" intact, all video types needed for     browser compatability-->
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted     volume="0">
        <source src="videos/splash.mp4" type="video/mp4"/>
        <source src="videos/splash.webm" type="video/webm"/>
        <source src="videos/splash.ogv" type="video/ogg ogv";     codecs="theora, vorbis"/>
        Video not supported. 
</video>
<p align="center" class="style1">enter website <a     href="http://www.my_wordpress_site.org/news/">here</a></p>
<div class="footer"></div>
</body>

使用此CSS代码使您的spash视频全屏显示，并将其保存为CSS目录中的“CSS/video.CSS”-->

#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width:100%;
min-height:100%;
max-height:4000%;
max-width:1000%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

As an example see my own Wordpress site with video splash page using the code above :

http://www.pe-vermeersch.com

SO网友:Vigs

function ron_redirect_to_vid() {
if(get_transient(\'ron_first_visit_\'.$user->ID) === false){
set_transient(\'ron_first_visit_\'.$user->ID, 1, 60*60*5);
//set a transient to remember the user logging in for 5 hours
//change the 5 to the number of hours you want to wait to show user the video again
wp_redirect(site_url().\'/PAGE_NAME_HERE/\');
exit;
  }
}
add_action(\'wp_login\', \'ron_redirect_to_vid\');

此解决方案希望在登录到页面或帖子后，或者在设置了瞬时值的情况下，重定向用户。该瞬态设置为记住用户5小时。5小时后，WordPress删除瞬态。

如果用户登录时没有代表他们的瞬态，则函数会创建一个瞬态，记住它5个小时，然后将用户重定向到所需页面。

如果没有瞬态或存在问题，get\\u transient（）应返回false，因此如果脚本失败，用户将被重定向到视频页面。

您应该在用户重定向到的页面上包含一个指向主页的链接，并在功能重定向到的页面上嵌入视频。

SO网友:Vigs

在主页上显示弹出式链接。

首先，在前端需要thickbox和jquery。

把这个放在你的函数中。php：

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script(\'jquery\');
   wp_register_script(\'jquery\', "http" . ($_SERVER[\'SERVER_PORT\'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script(\'jquery\');
}
if (!is_admin()) add_action(\'init\',\'my_thickbox\');
function my_thickbox(){
    wp_enqueue_script(\'thickbox\',null,array(\'jquery\'));
    wp_enqueue_style(\'thickbox.css\', \'/\'.WPINC.\'/js/thickbox/thickbox.css\', null, \'1.0\');
}

然后把这个放在你的页脚上。之后最好使用php<?php wp_footer() ?> :

<?php if(is_home()){ ?>
<div id="my-content-id" style="display:none; text-align: center;">
     <iframe width="560" height="315" src="//www.youtube.com/embed/7p34hxIHrGM" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
if ( typeof tb_pathToImage != \'string\' )
{
    var tb_pathToImage = "<?php echo get_bloginfo(\'url\').\'/wp-includes/js/thickbox\'; ?>/loadingAnimation.gif";
}
if ( typeof tb_closeImage != \'string\' )
{
    var tb_closeImage = "<?php echo get_bloginfo(\'url\').\'/wp-includes/js/thickbox\'; ?>/tb-close.png";
}
</script>
<script type=\'text/javascript\'>
$(document).ready(function(){
tb_show("","#TB_inline?width=575&height=350&inlineId=my-content-id", "");
});
</script>
<?php } ?>

您可以在“我的内容id”分区中显示任何内容。现在它显示了我的一个youtube视频。但你可以在这里放一个js播放器或youtube或vimeo视频。youtube或VimeoEmbedded要简单得多。

结束

小码农CODE

如何制作首页视频播放？

相关推荐

How to add homepage Widget?