Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
「video.js」を使った動画ページ - CodingMania
CodingMania

「video.js」を使った動画ページ

JSを読み込みます

<script src="video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript">VideoJS.setupAllWhenReady();</script>

HTMl

<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="640" height="360" controls="controls" preload="auto" poster="poster.jpg">
<source src="movie/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["https://codingmania.net/demo/video/0003/poster.jpg", {"url": "https://codingmania.net/demo/video/0003/movie/movie.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="poster.jpg" width="500" height="309" alt="日本の滝の映像" title="日本の滝の映像" />
</object>
</video>
</div>
<!-- End VideoJS -->
モバイルバージョンを終了