質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.37%

  • PHP

    25087questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9408questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

WordPressテーマSydneyについて、動画ヘッダーの音声が出るようにしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,217

前提・実現したいこと

WordPressテーマ『Sydney』でウェブサイトを作成しています。
ヘッダーメディアの部分でmp4動画を再生するように設定していますが
音声が伴って再生されません。。
sydneyダウンロードサイト→https://athemes.com/theme/sydney/

フロントページのヘッダーを動画にした場合、音声も一緒に再生されるようにするにはどうしたら良いのでしょうか。
ご教授のほどよろしくお願い致します。

試したこと

テーマの編集でphpのコードを探しましたが音声を
ミュートにしているなどのコードが見当たりませんでした。
Chromeからのコード検証でもミュートにしているなどの記述は確認できませんでした。

header.php該当箇所?

<div class="sydney-hero-area">
        <?php sydney_slider_template(); ?>
        <div class="header-image">
            <?php sydney_header_overlay(); ?>
            <img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
        </div>
        <?php sydney_header_video(); ?>

        <?php do_action('sydney_inside_hero'); ?>
    </div>


video-widget.php

<?php

class Sydney_Video_Widget extends WP_Widget {

    public function __construct() {
        $widget_ops = array('classname' => 'sydney_video_widget_widget', 'description' => __( 'Display a video from Youtube, Vimeo etc.', 'sydney') );
        parent::__construct(false, $name = __('Sydney: Video', 'sydney'), $widget_ops);
        $this->alt_option_name = 'sydney_video_widget';
    }

    function form($instance) {
        $title         = isset( $instance['title'] ) ? esc_attr( $instance['title'] ) : '';
        $url        = isset( $instance['url'] ) ? esc_url( $instance['url'] ) : '';
        $video_mode = isset( $instance['video_mode'] ) ? esc_attr( $instance['video_mode'] ) : '';
        $text         = isset( $instance['text'] ) ? wp_kses_post( $instance['text'] ) : '';

    ?>

    <p>
    <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'sydney'); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
    </p>

    <p><label for="<?php echo $this->get_field_id( 'url' ); ?>"><?php _e( 'Paste the URL of the video (only from a network that supports oEmbed, like Youtube, Vimeo etc.):', 'sydney' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'url' ); ?>" name="<?php echo $this->get_field_name( 'url' ); ?>" type="text" value="<?php echo $url; ?>" size="3" /></p>
    <p><label for="<?php echo $this->get_field_id('video_mode'); ?>"><?php _e('Video mode:', 'sydney'); ?></label>
        <select name="<?php echo $this->get_field_name('video_mode'); ?>" id="<?php echo $this->get_field_id('video_mode'); ?>">        
            <option value="vid-normal" <?php if ( 'vid-normal' == $video_mode ) echo 'selected="selected"'; ?>><?php echo __('Normal', 'sydney'); ?></option>
            <option value="vid-lightbox" <?php if ( 'vid-lightbox' == $video_mode ) echo 'selected="selected"'; ?>><?php echo __('Lightbox', 'sydney'); ?></option>
           </select>
    </p>  
    <p><label for="<?php echo $this->get_field_id( 'text' ); ?>"><?php _e( 'Text before the play button (only for lightbox mode):', 'sydney' ); ?></label>
    <textarea class="widefat" rows="6" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea></p>

    <?php
    }

    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title']         = strip_tags($new_instance['title']);
        $instance['url']         = esc_url_raw($new_instance['url']);
        $instance['video_mode'] = sanitize_text_field($new_instance['video_mode']);        
        if ( current_user_can( 'unfiltered_html' ) ) {
            $instance['text'] = $new_instance['text'];
        } else {
            $instance['text'] = wp_kses_post( $new_instance['text'] );
        }

        return $instance;
    }

    function widget($args, $instance) {
        if ( ! isset( $args['widget_id'] ) ) {
            $args['widget_id'] = $this->id;
        }

        extract($args);

        $title     = ( ! empty( $instance['title'] ) ) ? $instance['title'] : '';
        $title     = apply_filters( 'widget_title', $title, $instance, $this->id_base );
        $url       = isset( $instance['url'] ) ? esc_url( $instance['url'] ) : '';
        $video_mode = isset( $instance['video_mode'] ) ? esc_html($instance['video_mode']) : 'vid-normal';
        $text     = isset( $instance['text'] ) ? $instance['text'] : '';
        echo $before_widget;

        if ( $title ) echo $before_title . $title . $after_title;

        if( ($url) ) {
            echo '<div class="sydney-video ' . $video_mode . '">';
                echo '<div class="video-overlay">';
                echo '<div class="sydney-video-inner"><span class="close-popup"><i class="fa fa-times"></i></span>' . wp_oembed_get($url) . '</div>';
                echo '</div>';
                echo '<div class="video-text">' . $text . '</div>';
                echo '<a href="#" class="toggle-popup"><i class="fa fa-play"></i></a>';
            echo '</div>';
        }
        echo $after_widget;

    }

}    
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • syuus

    2017/08/16 21:28

    該当箇所のHTMLや現象が起きているサイトを提示すると回答が出てきやすいかと思います。

    キャンセル

  • yuya-nakamoto

    2017/08/16 23:10

    該当箇所かと思われる部分を抜粋してみました。

    キャンセル

  • kuck1u

    2017/08/17 19:43

    テーマがダウンロードできる URL を記述してください。

    キャンセル

  • yuya-nakamoto

    2017/08/18 13:18

    追記致しました!

    キャンセル

回答 1

checkベストアンサー

0

wp-includes/wp-custom-header.min.js で video タグをミュートにしているようです。
この機能は WordPress 4.7 から追加された WordPress 自体の機能なので、コアファイルを編集せずに修正するには下記のように対応する必要があります。

wp-includes/wp-custom-header.js を wp-content/themes/sydney/js/ にコピーして下記の行を削除。

video.muted = 'muted';

wp-content/themes/sydney/functions.php に以下のコードを追記。

add_action( 'wp_enqueue_scripts', 'replace_scripts', 20 );
function replace_scripts(){
  wp_deregister_script( 'wp-custom-header' );
  wp_enqueue_script( 'wp-custom-header', get_template_directory_uri() . '/js/wp-custom-header.js', array(), '1.0.0', true );
}

これで video タグのミュート設定が外れ、音声が出るようになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/23 13:29

    解決致しました!ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    25087questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9408questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。