WordPressにおけるvideo.jsの利用に関して

前提・実現したいこと

こんにちは。プログラミングの知識はあまりないのですが、ググりながら頑張って勉強しています。wordpressで動画閲覧サイトを運営しているのですが、video.jpというサービスを利用することで以下のコードで倍速再生ができることを知りましたので実装したいと考えております。また、動画は埋め込みではありません。
ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

ローカル環境で

html
1<head>
2    <link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
3    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
4    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
5</head>
6
7<body>
8    <video id='my-video' class='video-js' controls preload='auto' width='640' height='264' data-setup='{}'>
9        <source src='http://nob10.com/wp-content/uploads/2019/11/5cc33a96b107855483b098d52fcb6ef6.mp4' type='video/mp4'>
10
11
12            To view this video please enable JavaScript, and consider upgrading to a web browser that
13          <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
14
15
16    </video>
17    <script src='https://vjs.zencdn.net/7.5.5/video.js'></script>
18
19    <script src='https://vjs.zencdn.net/7.5.5/video.js'></script>
20<script>
21  (function(window, videojs) {
22    var player = window.player = videojs('my-video', {
23playbackRates: [0.5, 1, 1.5, 2]
24});
25  }(window, window.videojs));
26</script>
27
28</body>

を動かしたときは倍速のボタンがvjs-control-berに現れ、倍速できるのですが、
wordpressでテーマのheader.phpのhead内に上記のhead内容を、投稿記事に上記のbody内容を書き込んで投稿すると、動画の倍速ボタンがなくなります。
現在は、wordpressのページにのみ、ソースコードのエラーをGooglechromeで確認すると
Uncaught SyntaxError: Unexpected token '<'
と表示され、


<body class="post-template-default single single-post postid-668 single-format-standard logged-in admin-bar no-customize-support public-page page-body categoryid-3 ff-kosugi-maru fz-20px fw-500 hlt-center-logo-wrap ect-entry-card-wrap rect-entry-card-wrap no-scrollable-sidebar no-scrollable-main sidebar-right mblt-footer-mobile-buttons scrollable-mobile-buttons author-admin mobile-button-fmb no-mobile-sidebar no-sp-snippet font-awesome-4" itemscope itemtype="https://schema.org/WebPage">
：
省略
：
      <div class="entry-content cf" itemprop="mainEntityOfPage">
      
    <video id='my-video' class='video-js' controls preload='auto' width='640' height='264' data-setup='{}'>
        <source src='http://nob10.com/wp-content/uploads/2019/11/5cc33a96b107855483b098d52fcb6ef6.mp4' type='video/mp4'>


            To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>


    </video>
    <script src='https://vjs.zencdn.net/7.5.5/video.js'></script>

    <script src='https://vjs.zencdn.net/7.5.5/video.js'></script>
<script>
  (function(window, videojs) {
    var player = window.player = videojs('my-video', {
playbackRates: [0.5, 1, 1.5, 2]
});
  }(window, window.videojs));
      </div>←ここでエラー！！！！

といった状況です。どこをいじれば解決するのでしょうか？
ご教授いただけると幸いです。

Takumiboo

2019/12/01 02:00

ローカルでもWordPressのテーマと同じCSSを適用したらどのようになりますか？

yoshiAkaris

2019/12/01 02:06

読み込ませるのはstyle.cssだけでよろしいですか？やってみます！

yoshiAkaris

2019/12/01 02:12

Takumiboo

2019/12/01 02:16

テーマのCSSやJSとバッティングしている可能性があるかと思ったのですが。 WordPress内で表示させたときにデベロッパーツールなどでエラーは出ていないでしょうか。

yoshiAkaris

2019/12/01 02:24

あ、エラーの見方を理解しました。そして、エラーによるとCSS読み込めてませんでした・・・その他では、両方に GET https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js net::ERR_ABORTED 403 と、wordpressの方は加えて Uncaught SyntaxError: Unexpected token '<' と表示されています。

yoshiAkaris

2019/12/01 02:28

Uncaught SyntaxError: Unexpected token '<' ってのが、コードの playbackRates: [0.5, 1, 1.5, 2] }); のあとの</div>に関する内容でした。これが原因ですかね？

yoshiAkaris

2019/12/01 02:30

<div class="entry-content cf" itemprop="mainEntityOfPage">の閉じタグでした。

yoshiAkaris

2019/12/01 02:35

GET https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js net::ERR_ABORTED 403 に関しては解決しましたが、倍速再生に影響はないようです。

Takumiboo

2019/12/01 02:38

https://videojs.com/getting-started あらためて、ここに書かれている通りの手順で試してみていただけませんか。読み込んでいるものなどが違うようです。

yoshiAkaris

2019/12/01 02:45

わかりました。ありがとうございました。おかげさまでかなり進展しました。引き続き戦います。

行動規範の内容に同意します

回答1件

自己解決

倍速再生が無事実装できました！！！！！！！！！

詳しくはわからないですが、wordpressだとbody内で正常に倍速のJSが機能していないと予想し、「Insert Headers and Footers」というwordpressのプラグインでbody内に

HTML
1    <script src='https://vjs.zencdn.net/7.5.5/video.js'></script>
2<script>
3  (function(window, videojs) {
4    var player = window.player = videojs('my-video', {
5playbackRates: [0.5, 1, 1.5, 2]
6});
7  }(window, window.videojs));]

を書き込んだらできました！
ただ不可解なことに、投稿ページの終わりが、<script>になっていないと機能しません。
加えた上記のコードの最初の<script>をとっても機能しませんでした。
プログラミングの知識がない自分ですが、始めと終わりのタグが全然あっていない気がして疑問は残りますが、できたので、OK

投稿2019/12/01 04:33

yoshiAkaris

総合スコア4