バックグランドに指定しましたが、画像が表示されていません。
ディレクトリ構造は、下記のとおりです。
・index.html
・style.css
・start.ico
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 6<title>おばけ</title> 7<script> 8$(function() { 9$('.content').fadeOut('slow'); 10$('a').click(function() {$(this).parent().fadeOut('slow');}); 11$('#play').click(function() {$('.content').fadeIn('slow');}); 12}); 13 14 15 16</script> 17<link href="./style.css" rel="stylesheet" type="text/css"> 18<link href="./video.css" rel="stylesheet" type="text/css"> 19<script type="text/javascript" src="./video.js"></script> 20 21</head> 22<body> 23 24<div id="video_player_box"> 25 <video id="my_video" width="550" height="310" autoplay> 26 <source src="C:\Users\tanabe\Documents\Bandicam\bandicam 2018-01-03 23-45-33-528.mp4"> 27 </video> 28 <div id="video_controls_bar"> 29 <button id="playpausebtn"></button> 30 <input id="seekslider" type="range" min="0" max="100" value="0" step="1"> 31 <span id="curtimetext">00:00</span> / <span id="durtimetext">00:00</span> 32 <button id="mutebtn">Mute</button> 33 <input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> 34 <button id="fullscreenbtn">[ ]</button> 35 </div> 36</div> 37 38 39 40</body> 41</html>
CSS
1div#video_player_box{ width:550px; background:#000; margin:0px auto;} 2div#video_controls_bar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} 3button#playpausebtn{ 4 background:url("start.ico"); 5 border:none; 6 width:16px; 7 height:18px; 8 cursor:pointer; 9 z-index: 1; 10 opacity:0.5; 11} 12button#playpausebtn:hover{ opacity:1; } 13input#seekslider{ width:180px; } 14input#volumeslider{ width: 80px;} 15input[type='range'] { 16 -webkit-appearance: none !important; 17 background: #000; 18 border:#666 1px solid; 19 height:4px; 20} 21input[type='range']::-webkit-slider-thumb { 22 -webkit-appearance: none !important; 23 background: #FFF; 24 height:15px; 25 width:15px; 26 border-radius:100%; 27 cursor:pointer; 28} 29
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。