web-dev-qa-db-ja.com

ホームページ用にビデオを再生する方法は？

訪問者が私の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)}
homepagevideos
1
van abel

私の提案：

  1. WordPressテーマ内に特定のビデオスプラッシュテンプレートを作成し、サイトの残りの部分にアクセスするためのリンクを組み込みます。
  2. フルスクリーンのビデオをサポートするために、Webディレクトリに特定のCSSファイルを配置します。
  3. スプラッシュテンプレートを使用して新しい空のページを作成し、このページをWordPressブログまたはWebサイトのホームページとして使用します。

技術的詳細：

*このコードを使用してビデオスプラッシュテンプレートを作成し、「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;
}

例として、上記のコードを使用したビデオスプラッシュページのある独自のWordpressサイトを参照してください：

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

このソリューションは、ページまたは投稿へのログイン後、または一時的な値が設定されている場合はどこにでもユーザーをリダイレクトしようとします。このトランジェントは、ユーザーを5時間記憶するように設定されています。 5時間後WordPressはトランジェントを削除します。

ユーザーがログインし、それらを表すトランジェントがない場合、関数はトランジェントを作成し、5時間記憶してから、ユーザーを目的のページにリダイレクトします。

get_transient（）は、一時的なものがない場合、または問題がある場合はfalseを返す必要があります。そのため、スクリプトが失敗した場合、ユーザーはビデオページにリダイレクトされます。

ユーザーがリダイレクトされるページにホームページに戻るリンクを含め、関数がリダイレクトされるページにビデオを埋め込みます。

0
Vigs

ホームページにポップアップリンクを表示します。

まず、フロントエンドでthickboxとjqueryが必要です。

あなたの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');
}

次に、これを<?php wp_footer() ?>の後にfooter.phpに追加します。

<?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 } ?>

My-content-id部門には、表示するものを何でも配置できます。現在、私のYouTubeビデオの1つが表示されています。ただし、jsプレーヤーをここに配置することも、youtubeまたはvimeoビデオを配置することもできます。 youtubeまたはvimeoembeddの方がはるかに簡単です。

0
Vigs