学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.0 | 動画学習サイトを作成| 49 | デプロイ| 動画(Wistia)設定

[48] デプロイ| Google認証 << [ホームに戻る] >> [50] デプロイ|コンパイル


Herokuにデプロイすると「https」通信となりますので動画Wistiaのスクリプトリンクを変更しなければなりません。


「app\views\task\show.html.erb」ファイルの93行目「script src」のリンク部分を「https://fast.wistia.net/static/E-v1.js」に変更します。
「http」を「https」に変更しただけです。



記述変更 app\views\task\show.html.erb(98行目)

<section class="section">
    <div class="container">
        <div class="col m8">
            <div class="card z-depth-2">

                <!--Wistiaプレーヤー-->
                <div id="wistia_<%= @task.video %>"></div>
                <div class="row">
                    <div class="container">
                        <div class="notification">
                            <!-- Wistia機能ボタン -->
                            <button class="button is-light" onclick="setPlaySpeed(0.75)">0.75x</button>
                            <button class="button is-light" onclick="setPlaySpeed(1)">1x</button>
                            <button class="button is-light" onclick="setPlaySpeed(1.25)">1.25x</button>
                            <button class="button is-light" onclick="setPlaySpeed(1.5)">1.5x</button>
                            <button class="button is-light" onclick="setPlaySpeed(2)">2x</button>
                        </div>
                    </div>
                </div>

                <div class="row">
                </div>
                <div class="card-action grey-text text-darken-4">
                    <div class="container">
                        <div class="notification">
                            <%= @task.title %>
                        </div>
                    </div>

                    <!--  前へ次へボタン -->
                    <div class="container">
                        <div class="notification">
                            <% if !@prev_task.nil? %>
                                <%= link_to "前のタスク", [@prev_task.project, @prev_task], class: "button is-success"  %>
                            <% else %>	
                                &nbsp;
                            <% end %>
                            <% if !@next_task.nil? %>
                                <span class="right">
                                    <%= link_to "次のタスク", [@next_task.project, @next_task], class: "button is-success"  %>
                                </span>
                            <% end %>
                        </div>
                    </div>

                    <div class="box">
                        <span class="tag is-white is-large"> <%= @task.description %></span>
                    </div>
                    <% if !@task.note.blank? %>
                        <div class="box">
                            <%= markdown(@task.note) %>
                        </div>   
                    <% end %>                 
                </div>
            </div>
        </div>
        
        <!-- タスク Section -->
        <div class="box">
            <article class="media">
                <div class="media-content">
                    <div class="content">
                        <div class="collection">
                            <% @tasks.each do |task| %>
                                <% if task.header %>
                                    <br/>
                                    <div class="collection-item active">
                                        <span class="tag is-link is-large"> <%= task.title %></span>
                                        <span class="tag is-white is-large"> <%= task.description %></span>
                                    </div>
                                    <br/>
                                <% else %>
                                    <div class="collection-item active">
                                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="tag is-light is-medium" style="margin: 3px;">
                                            <%= link_to [task.project, task], class: "collection-item" do %>
                                                <%= task.title %>
                                            <% end %>                                                                
                                            </span>
                                        
                                    </div>                            
                                <% end %>
                            <% end %>
                        </div>
                    </div>
                </div>
            </article>
        </div>

    </div>
</section>

<!-- Wistia スクリプト-->
<script src="https://fast.wistia.net/static/E-v1.js"></script>
<script>
	wistiaEmbed = Wistia.embed("<%= @task.video %>", {
		videoQuality: "hd-only",
		videoFoam: true
	});
	function setPlaySpeed(speed) {
		wistiaEmbed.playbackRate(speed);
	}
</script>  



↓↓クリックして頂けると励みになります。


[48] デプロイ| Google認証 << [ホームに戻る] >> [50] デプロイ|コンパイル

YAE C5 CLINIC(札幌美容クリニック)

関連記事(外部サイト)