181 lines
5.9 KiB
HTML
181 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Heading -->
|
|
<title>Video Player</title>
|
|
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="../../../favicon.ico">
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
|
|
<!-- CSS Front Template -->
|
|
<link rel="stylesheet" href="../../../assets/css/theme.css">
|
|
</head>
|
|
<body>
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- Video Block -->
|
|
<div id="youTubeVideoPlayerExample1" class="video-player bg-dark">
|
|
<!-- Cover Image -->
|
|
<img class="img-fluid video-player-preview" src="../../../assets/img/900x450/img2.jpg" alt="Image">
|
|
<!-- End Cover Image -->
|
|
|
|
<!-- Play Button -->
|
|
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
|
data-hs-video-player-options='{
|
|
"videoId": "t9R7xx0joOU",
|
|
"parentSelector": "#youTubeVideoPlayerExample1",
|
|
"targetSelector": "#youTubeVideoIframeExample1",
|
|
"isAutoplay": true,
|
|
"classMap": {
|
|
"toggle": "video-player-played"
|
|
}
|
|
}'>
|
|
<span class="video-player-icon">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
</a>
|
|
<!-- End Play Button -->
|
|
|
|
<!-- Video Iframe -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<div id="youTubeVideoIframeExample1"></div>
|
|
</div>
|
|
<!-- End Video Iframe -->
|
|
</div>
|
|
<!-- End Video Block -->
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- Video Block -->
|
|
<div id="vimeoVideoPlayerExample1" class="video-player bg-dark">
|
|
<!-- Cover Image -->
|
|
<img class="img-fluid video-player-preview" src="../../../assets/img/900x450/img1.jpg" alt="Image">
|
|
<!-- End Cover Image -->
|
|
|
|
<!-- Play Button -->
|
|
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
|
data-hs-video-player-options='{
|
|
"videoType": "vimeo",
|
|
"videoId": "259411563",
|
|
"parentSelector": "#vimeoVideoPlayerExample1",
|
|
"targetSelector": "#vimeoVideoIframeExample1",
|
|
"isAutoplay": true,
|
|
"isMuted": true,
|
|
"classMap": {
|
|
"toggle": "video-player-played"
|
|
}
|
|
}'>
|
|
<span class="video-player-icon">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
</a>
|
|
<!-- End Play Button -->
|
|
|
|
<!-- Video Iframe -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<div id="vimeoVideoIframeExample1"></div>
|
|
</div>
|
|
<!-- End Video Iframe -->
|
|
</div>
|
|
<!-- End Video Block -->
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<!-- Video Block -->
|
|
<div id="vimeoVideoPlayerExample3" class="video-player bg-dark">
|
|
<!-- Cover Image -->
|
|
<img class="img-fluid video-player-preview" src="../../../assets/img/900x450/img1.jpg" alt="Image">
|
|
<!-- End Cover Image -->
|
|
|
|
<!-- Play Button -->
|
|
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
|
data-hs-video-player-options='{
|
|
"videoType": "vimeo",
|
|
"videoId": "259411563",
|
|
"parentSelector": "#vimeoVideoPlayerExample3",
|
|
"targetSelector": "#vimeoVideoIframeExample3",
|
|
"isAutoplay": true,
|
|
"isMuted": false,
|
|
"classMap": {
|
|
"toggle": "video-player-played"
|
|
}
|
|
}'>
|
|
<span class="video-player-icon">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
</a>
|
|
<!-- End Play Button -->
|
|
|
|
<!-- Video Iframe -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<div id="vimeoVideoIframeExample3"></div>
|
|
</div>
|
|
<!-- End Video Iframe -->
|
|
</div>
|
|
<!-- End Video Block -->
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<!-- Video Block -->
|
|
<div id="html5VideoPlayerExample1" class="video-player bg-dark">
|
|
<!-- Cover Image -->
|
|
<img class="img-fluid video-player-preview" src="../../../assets/img/900x450/img1.jpg" alt="Image">
|
|
<!-- End Cover Image -->
|
|
|
|
<!-- Play Button -->
|
|
<a class="js-inline-video-player video-player-btn video-player-centered" href="javascript:;"
|
|
data-hs-video-player-options='{
|
|
"videoType": "html5",
|
|
"videoId": "../../../assets/media/html5-video/working-in-office/working-in-office",
|
|
"parentSelector": "#html5VideoPlayerExample1",
|
|
"targetSelector": "#html5VideoIframeExample1",
|
|
"isAutoplay": true,
|
|
"isMuted": true,
|
|
"classMap": {
|
|
"toggle": "video-player-played"
|
|
}
|
|
}'>
|
|
<span class="video-player-icon">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
</a>
|
|
<!-- End Play Button -->
|
|
|
|
<!-- Video Iframe -->
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<div id="html5VideoIframeExample1"></div>
|
|
</div>
|
|
<!-- End Video Iframe -->
|
|
</div>
|
|
<!-- End Video Block -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height: 20vh;"></div>
|
|
|
|
<script src="../../../assets/vendor/jquery/dist/jquery.min.js"></script>
|
|
<script src="../../../assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
|
<script src="../../../assets/vendor/popper.js/dist/umd/popper.min.js"></script>
|
|
<script src="../../../assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
|
|
<script src="./dist/hs-video-player.min.js"></script>
|
|
|
|
<script>
|
|
new HSVideoPlayer('.js-inline-video-player')
|
|
</script>
|
|
</body>
|
|
</html>
|