web-dev-qa-db-fra.com

Comment faire jouer une vidéo pour la page d'accueil?

J'aimerais ajouter une vidéo (lecture automatique) avant que le visiteur ne se connecte à mon blog wp (peut-être juste la page d'accueil, pas toutes les publications), comment est-ce possible? Je pense que javascript est peut-être le meilleur choix?

Pourriez-vous donner votre solution (peu importe js ou pas) en détail?

MODIFIER:

Après un moment, je pense que cela devrait fonctionner pour moi, mais le fait est que non? Pourquoi?

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)}
homepagevideos
1
van abel

Ma suggestion:

  1. Créez un modèle de splash vidéo spécifique dans votre thème WordPress avec un lien pour visiter le reste de votre site.
  2. Mettez dans votre répertoire Web un fichier CSS spécifique pour la prise en charge de la vidéo en plein écran.
  3. Créez une nouvelle page vide à l'aide du modèle de démarrage et utilisez cette page comme page d'accueil sur votre blog ou site web WordPress.

Détails techniques:

* Utilisez et adaptez ce code pour créer votre modèle de splash vidéo, enregistrez-le sous le nom "splash.php" et mettez-le dans votre dossier de thème Wordpress - Vous trouverez plus d'informations sur cet arrière-plan ici: 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>

Utilisez ce code CSS pour rendre votre vidéo spash en plein écran et enregistrez-le sous le nom "css/video.css" dans votre répertoire 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;
}

Par exemple, voyez mon propre site Wordpress avec une page de démarrage vidéo en utilisant le code ci-dessus:

http://www.pe-vermeersch.com

1
Zendrik
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');

Cette solution a pour objectif de rediriger l'utilisateur après la connexion à une page, à une publication ou à un autre endroit si la valeur transitoire est définie. Ce transitoire est configuré pour se souvenir de l'utilisateur pendant 5 heures. Après les 5 heures, WordPress supprime le transitoire.

Si un utilisateur se connecte et qu’il n’ya pas un transitoire qui les représente, la fonction crée un transitoire, l’enregistre pendant 5 heures, puis le redirige vers la page souhaitée.

get_transient () doit renvoyer false s'il n'y a pas de transitoire ou s'il y a un problème, ainsi si le script échoue, l'utilisateur sera redirigé vers votre page vidéo.

Vous devez inclure un lien vers votre page d'accueil sur la page vers laquelle l'utilisateur est redirigé et intégrer la vidéo à la page vers laquelle la fonction redirige.

0
Vigs

Afficher un lien popup sur la page d'accueil.

vous avez d’abord besoin de thickbox et de jquery sur votre face avant.

Mettez ceci dans votre functions.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');
}

Puis mettez ceci dans votre footer.php préférable après <?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 } ?>

Vous pouvez mettre ce que vous voulez afficher dans la division my-content-id. En ce moment, il montre l'une de mes vidéos youtube. Mais vous pouvez mettre un lecteur js ici ou une vidéo youtube ou vimeo. Un youtube ou vimeoembedd serait beaucoup plus simple.

0
Vigs