mirror of
https://github.com/videojs/video.js.git
synced 2024-12-29 02:57:21 +02:00
Added autoplay fix for Safari.
Added CSS updated to src files.
This commit is contained in:
Steve Heffernan
parent
cc27d630c6
commit
3243b01e6c
@ -59,7 +59,7 @@
|
||||
<tr><th colspan="2">HTML5</th><th colspan="2">H5Swf</th><th colspan="2">YouTube</th></tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<video id="vid1" class="video-js vjs-default-skin" preload="auto" width="480" height="198"
|
||||
<video id="vid1" class="video-js vjs-default-skin" preload="none" width="480" height="198"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
@ -67,14 +67,14 @@
|
||||
</video>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<video id="vid2" class="video-js vjs-default-skin" preload="auto" width="480" height="198"
|
||||
<video id="vid2" class="video-js vjs-default-skin" preload="none" width="480" height="198"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png">
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
|
||||
</video>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<video id="vid3" class="video-js vjs-default-skin" preload="auto" width="480" height="198">
|
||||
<video id="vid3" class="video-js vjs-default-skin" preload="none" width="480" height="198">
|
||||
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0" type='video/youtube'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
|
||||
|
||||
@ -52,7 +52,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
/* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
|
||||
background: #242424; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
|
||||
background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
|
||||
@ -106,30 +106,30 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
.vjs-default-skin .vjs-volume-control { width: 5em; float: right; }
|
||||
.vjs-default-skin .vjs-volume-bar {
|
||||
position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; background: #666; cursor: pointer !important;
|
||||
position: relative; width: 5em; height: 0.6em; margin: 1em auto 0; cursor: pointer !important;
|
||||
|
||||
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
|
||||
|
||||
background: #333;
|
||||
background: -moz-linear-gradient(top, #333 0%, #666 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#666));
|
||||
background: -webkit-linear-gradient(top, #333 0%,#666 100%);
|
||||
background: -o-linear-gradient(top, #333 0%,#666 100%);
|
||||
background: -ms-linear-gradient(top, #333 0%,#666 100%);
|
||||
background: linear-gradient(top, #333 0%,#666 100%);
|
||||
background: #666;
|
||||
background: -moz-linear-gradient(top, #333, #666);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
|
||||
background: -webkit-linear-gradient(top, #333, #666);
|
||||
background: -o-linear-gradient(top, #333, #666);
|
||||
background: -ms-linear-gradient(top, #333, #666);
|
||||
background: linear-gradient(top, #333, #666);
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-level {
|
||||
position: absolute; top: 0; left: 0; height: 0.6em; background: #fff;
|
||||
position: absolute; top: 0; left: 0; height: 0.6em;
|
||||
|
||||
-moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em;
|
||||
|
||||
background: #ffffff;
|
||||
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc));
|
||||
background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%);
|
||||
background: -o-linear-gradient(top, #ffffff 0%,#cccccc 100%);
|
||||
background: -ms-linear-gradient(top, #ffffff 0%,#cccccc 100%);
|
||||
background: linear-gradient(top, #ffffff 0%,#cccccc 100%);
|
||||
background: #fff;
|
||||
background: -moz-linear-gradient(top, #fff, #ccc);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
|
||||
background: -webkit-linear-gradient(top, #fff, #ccc);
|
||||
background: -o-linear-gradient(top, #fff, #ccc);
|
||||
background: -ms-linear-gradient(top, #fff, #ccc);
|
||||
background: linear-gradient(top, #fff, #ccc);
|
||||
}
|
||||
.vjs-default-skin .vjs-volume-handle {
|
||||
position: absolute; top: -0.2em; width: 0.8em; height: 0.8em; background: #ccc; left: 0;
|
||||
@ -149,12 +149,13 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
/* CSS Gradient */
|
||||
background: #333;
|
||||
background: -moz-linear-gradient(top, #333 0%, #222 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
|
||||
background: -webkit-linear-gradient(top, #222 0%,#333 100%);
|
||||
background: -o-linear-gradient(top, #333 0%,#222 100%);
|
||||
background: -ms-linear-gradient(top, #333 0%,#222 100%);
|
||||
background: linear-gradient(top, #333 0%,#222 100%);
|
||||
background: -moz-linear-gradient(top, #222, #333);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
|
||||
background: -webkit-linear-gradient(top, #222, #333);
|
||||
background: -o-linear-gradient(top, #333, #222);
|
||||
background: -ms-linear-gradient(top, #333, #222);
|
||||
background: linear-gradient(top, #333, #222);
|
||||
|
||||
|
||||
/* 1px top shadow */
|
||||
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
|
||||
@ -169,12 +170,12 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
/* CSS Gradient */
|
||||
background: #111;
|
||||
background: -moz-linear-gradient(top, #111 0%, #262626 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#262626));
|
||||
background: -webkit-linear-gradient(top, #111 0%,#262626 100%);
|
||||
background: -o-linear-gradient(top, #111 0%,#262626 100%);
|
||||
background: -ms-linear-gradient(top, #111 0%,#262626 100%);
|
||||
background: linear-gradient(top, #111 0%,#262626 100%);
|
||||
background: -moz-linear-gradient(top, #111, #262626);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
|
||||
background: -webkit-linear-gradient(top, #111, #262626);
|
||||
background: -o-linear-gradient(top, #111, #262626);
|
||||
background: -ms-linear-gradient(top, #111, #262626);
|
||||
background: linear-gradient(top, #111, #262626);
|
||||
}
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
|
||||
.vjs-default-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
|
||||
@ -189,7 +190,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
/* CSS Gradient. */
|
||||
background: #fff; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #fff 0%, #d6d6d6 50%, #fff 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#fff), color-stop(50%,#d6d6d6), color-stop(100%,#fff));
|
||||
background: -webkit-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
|
||||
background: -o-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
|
||||
background: -ms-linear-gradient(top, #fff 0%,#d6d6d6 50%,#fff 100%);
|
||||
@ -197,7 +198,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
background: #efefef;
|
||||
background: -moz-linear-gradient(top, #efefef 0%, #f5f5f5 50%, #dbdbdb 50%, #f1f1f1 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#efefef), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#f1f1f1));
|
||||
background: -webkit-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
|
||||
background: -o-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
|
||||
background: -ms-linear-gradient(top, #efefef 0%,#f5f5f5 50%,#dbdbdb 50%,#f1f1f1 100%);
|
||||
@ -209,12 +210,12 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
/* CSS Gradient */
|
||||
background: #666;
|
||||
background: -moz-linear-gradient(top, #666 0%, #333 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666), color-stop(100%,#333));
|
||||
background: -webkit-linear-gradient(top, #666 0%,#333 100%);
|
||||
background: -o-linear-gradient(top, #666 0%,#333 100%);
|
||||
background: -ms-linear-gradient(top, #666 0%,#333 100%);
|
||||
background: linear-gradient(top, #666 0%,#333 100%);
|
||||
background: -moz-linear-gradient(top, #666, #333);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
|
||||
background: -webkit-linear-gradient(top, #666, #333);
|
||||
background: -o-linear-gradient(top, #666, #333);
|
||||
background: -ms-linear-gradient(top, #666, #333);
|
||||
background: linear-gradient(top, #666, #333);
|
||||
}
|
||||
|
||||
.vjs-default-skin div.vjs-seek-handle {
|
||||
@ -223,11 +224,11 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
margin-top: -0.3em;
|
||||
left: 0; top: 0; /*Needed for IE6*/
|
||||
|
||||
background: url('video-js.png') 0px -50px;
|
||||
background: url('video-js.png') 0 -50px;
|
||||
/* CSS Curved Corners. Needed to make shadows curved. */
|
||||
-moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
|
||||
/* CSS Shadows */
|
||||
-webkit-box-shadow: 0px 2px 4px 0px #000; -moz-box-shadow: 0px 2px 4px 0px #000; box-shadow: 0px 2px 4px 0px #000;
|
||||
-webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
|
||||
}
|
||||
/* Time Display
|
||||
-------------------------------------------------------------------------------- */
|
||||
@ -243,12 +244,12 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
font-size: 1em; line-height: 1.0em; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
|
||||
|
||||
background: #333;
|
||||
background: -moz-linear-gradient(top, #222 0%, #333 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#333));
|
||||
background: -webkit-linear-gradient(top, #222 0%,#333 100%);
|
||||
background: -o-linear-gradient(top, #333 0%,#222 100%);
|
||||
background: -ms-linear-gradient(top, #333 0%,#222 100%);
|
||||
background: linear-gradient(top, #333 0%,#222 100%);
|
||||
background: -moz-linear-gradient(top, #222, #333);
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#333));
|
||||
background: -webkit-linear-gradient(top, #222, #333);
|
||||
background: -o-linear-gradient(top, #333, #222);
|
||||
background: -ms-linear-gradient(top, #333, #222);
|
||||
background: linear-gradient(top, #333, #222);
|
||||
|
||||
/* 1px top shadow */
|
||||
/* -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15);*/
|
||||
@ -284,7 +285,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
|
||||
background: #454545;
|
||||
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
|
||||
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
|
||||
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
|
||||
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
|
||||
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
|
||||
@ -296,7 +297,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by
|
||||
}
|
||||
|
||||
.vjs-default-skin div.vjs-big-play-button:hover {
|
||||
-webkit-box-shadow: 0px 0px 80px #fff; -moz-box-shadow: 0px 0px 80px #fff; box-shadow: 0px 0px 80px #fff;
|
||||
-webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
|
||||
}
|
||||
|
||||
.vjs-default-skin div.vjs-big-play-button span {
|
||||
|
||||
27
dev/dev.html
27
dev/dev.html
@ -41,23 +41,32 @@
|
||||
<script src="src/tech/youtube.js"></script>
|
||||
|
||||
<script src="src/autoload.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="flash/swfobject.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<video id="vid1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
|
||||
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="none" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
|
||||
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0&feature=related" type='video/youtube'>
|
||||
<!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
<!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
</video>
|
||||
|
||||
<video id="vid1" class="video-js vjs-default-skin" autoplay controls preload="none" width="640" height="264"
|
||||
poster="http://video-js.zencoder.com/oceans-clip.png"
|
||||
data-setup='{"techOrder":["html5","youtube"]}'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
||||
<source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'>
|
||||
<source src="http://www.youtube.com/watch?v=YjaZNYSt7o0&feature=related" type='video/youtube'>
|
||||
<!-- <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'> -->
|
||||
<!-- <source src="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" type='video/flv'> -->
|
||||
<!-- <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
|
||||
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'> -->
|
||||
<!-- <source src="http://stg.video.howcookingworks.com/video/posts/e110d95f6770c62e8d3ba52ff221e7f7907683ac266939/e110d95f6770c62e8d3ba52ff221e7f7907683ac266939_high.webm" type='video/webm'> -->
|
||||
<!-- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"'> -->
|
||||
<!-- <track kind="subtitles" src="http://videojs.com/subtitles/demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
<!-- <track kind="subtitles" src="demo-subtitles.srt" srclang="en-US" label="English"></track> -->
|
||||
</video>
|
||||
|
||||
3285
dev/dist/video.js
vendored
Normal file
3285
dev/dist/video.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -345,8 +345,9 @@ VideoJS.fn = VideoJS.prototype = {
|
||||
this.currentTime(0);
|
||||
this.play();
|
||||
} else {
|
||||
this.currentTime(0);
|
||||
this.pause();
|
||||
this.currentTime(0);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -41,6 +41,15 @@ VideoJS.tech.html5 = {
|
||||
} else {
|
||||
this.triggerEvent("loadstart");
|
||||
}
|
||||
|
||||
// Moving video inside box breaks autoplay on Safari.
|
||||
this.addEvent("techready", function(){
|
||||
if (this.options.autoplay && this.paused()) {
|
||||
this.play();
|
||||
}
|
||||
this.removeEvent("techready", arguments.callee);
|
||||
});
|
||||
|
||||
this.triggerEvent("techready");
|
||||
},
|
||||
supports: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user