Video fond YouTube
This commit is contained in:
parent
3aa505636a
commit
b3767fdf57
67
index.html
67
index.html
@ -51,7 +51,7 @@
|
||||
</nav>
|
||||
|
||||
<header class="masthead">
|
||||
<video id="masthead-video"></video>
|
||||
<iframe src="https://www.youtube.com/embed/RX_VXNl1xvg?modestbranding=1&rel=0&html5=1&controls=0&showinfo=0&autoplay=1&loop=1&playlist=RX_VXNl1xvg" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
<a class="btn btn-default btn-xl" href="#about">
|
||||
<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
|
||||
@ -320,59 +320,10 @@
|
||||
<!-- Custom scripts for this template -->
|
||||
<script src="js/creative.min.js"></script>
|
||||
|
||||
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
|
||||
|
||||
<script>
|
||||
var masthead_video = document.getElementById("masthead-video");
|
||||
var video_button = document.getElementById("video-sound");
|
||||
var fullscreen_button = document.getElementById("fullscreen-video");
|
||||
|
||||
function masthead_video_mute(mute) {
|
||||
player.setMute(mute);
|
||||
if (mute) {
|
||||
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-off");
|
||||
}
|
||||
else {
|
||||
video_button.children[0].children[0].setAttribute("xlink:href", "/vector/sprite.svg#sound-on");
|
||||
}
|
||||
}
|
||||
|
||||
video_button.onclick = function () {
|
||||
if (masthead_video.muted) {
|
||||
masthead_video_mute(false);
|
||||
} else {
|
||||
masthead_video_mute(true);
|
||||
}
|
||||
};
|
||||
|
||||
function loopVideo(e)
|
||||
{
|
||||
console.log("EVENT RECEIVED: " + e.type);
|
||||
player.seek(0);
|
||||
player.play();
|
||||
}
|
||||
|
||||
function fullscreen(video) {
|
||||
if (video.requestFullscreen) {
|
||||
video.requestFullscreen();
|
||||
} else if (video.mozRequestFullScreen) {
|
||||
video.mozRequestFullScreen();
|
||||
} else if (video.webkitRequestFullscreen) {
|
||||
video.webkitRequestFullscreen();
|
||||
}
|
||||
}
|
||||
|
||||
fullscreen_button.onclick = function () {
|
||||
fullscreen(masthead_video);
|
||||
};
|
||||
|
||||
var url = "video/dash/1_Compilation_Graphique/1_Compilation_Graphique.mpd";
|
||||
var player = dashjs.MediaPlayer().create();
|
||||
player.getDebug().setLogToBrowserConsole(false);
|
||||
player.initialize(document.querySelector("#masthead-video"), url, true);
|
||||
player.on(dashjs.MediaPlayer.events.PLAYBACK_ENDED,loopVideo);
|
||||
player.setMute(true);
|
||||
|
||||
var portfolio_videos = document.getElementsByClassName('video-portfolio');
|
||||
|
||||
for (video_div of portfolio_videos) {
|
||||
@ -382,8 +333,6 @@
|
||||
|
||||
var comment_header = "<hr><p>"
|
||||
|
||||
var prev_video_mute = true;
|
||||
|
||||
$('#iframeModal').on('show.bs.modal', function (event) {
|
||||
var modal = $(this);
|
||||
var button = $(event.relatedTarget);
|
||||
@ -400,11 +349,6 @@
|
||||
|
||||
if (youtube_id) {
|
||||
|
||||
if (!masthead_video.muted) {
|
||||
prev_video_mute = false;
|
||||
masthead_video_mute(true);
|
||||
}
|
||||
|
||||
url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1";
|
||||
|
||||
if (options) {
|
||||
@ -416,11 +360,6 @@
|
||||
|
||||
} else if (vimeo_id) {
|
||||
|
||||
if (!masthead_video.muted) {
|
||||
prev_video_mute = false;
|
||||
masthead_video_mute(true);
|
||||
}
|
||||
|
||||
url = 'https://player.vimeo.com/video/' + vimeo_id;
|
||||
|
||||
iframe.setAttribute("allowfullscreen", "");
|
||||
@ -445,10 +384,6 @@
|
||||
$('#iframeModal').on('hidden.bs.modal', function () {
|
||||
$(this).find('.modal-body iframe')[0].src = "";
|
||||
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
|
||||
|
||||
if (!prev_video_mute) {
|
||||
masthead_video_mute(false);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@ -38,6 +38,16 @@ header.masthead {
|
||||
.btn-xl {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 100%;
|
||||
#video-sound {
|
||||
|
||||
Binary file not shown.
@ -1,41 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
file=$1
|
||||
option=$2
|
||||
|
||||
if [[ -n "$file" ]]; then
|
||||
|
||||
name=${file%.*}
|
||||
|
||||
if [[ -d ${name} ]]; then
|
||||
case $option in
|
||||
--force)
|
||||
echo "Deleting ${name}/ ..."
|
||||
rm -rf ${name}
|
||||
;;
|
||||
*)
|
||||
echo "Please use the --force option to overwrite existing data"
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
fi
|
||||
|
||||
mkdir -p ${name}
|
||||
|
||||
ffmpeg -i ${file} -c:a aac -ac 2 -ab 128k -vn ${name}/${name}-audio.mp4 &
|
||||
|
||||
ffmpeg -i ${file} -s 1920x1080 -c:v libx264 -b:v 5500k -x264opts 'keyint=50:min-keyint=50:no-scenecut' -profile:v main -preset fast -movflags +faststart ${name}/${name}-1080.mp4 &
|
||||
|
||||
ffmpeg -i ${file} -s 1280x720 -c:v libx264 -b:v 2500k -x264opts 'keyint=50:min-keyint=50:no-scenecut' -profile:v main -preset fast -movflags +faststart ${name}/${name}-720.mp4 &
|
||||
|
||||
ffmpeg -i ${file} -s 960x540 -c:v libx264 -b:v 1400k -x264opts 'keyint=50:min-keyint=50:no-scenecut' -profile:v main -preset fast -movflags +faststart ${name}/${name}-540.mp4 &
|
||||
|
||||
ffmpeg -i ${file} -s 640x360 -c:v libx264 -b:v 650k -x264opts 'keyint=50:min-keyint=50:no-scenecut' -profile:v main -preset fast -movflags +faststart ${name}/${name}-360.mp4 &
|
||||
|
||||
wait
|
||||
|
||||
MP4Box -dash 4000 -rap -bs-switching no -profile live -out ${name}/${name}.mpd ${name}/${name}-1080.mp4#video ${name}/${name}-720.mp4#video ${name}/${name}-540.mp4#video ${name}/${name}-360.mp4#video ${name}/${name}-audio.mp4#audio
|
||||
|
||||
else
|
||||
echo "./mpd_generate.sh INPUT"
|
||||
fi
|
||||
Loading…
Reference in New Issue
Block a user