I want to add Watermark in a video using html5. I am using Laravel 5.7 and plugins Video.js to do this. But when video fullscreen mode, the watermark is not display, But in normal view the watermark displayed.
I got an issue in fullscreen mode, when i click fullscreen video, the watermark is not displayed.
How to fix this issue?
This is my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://c.sproutvideo.com/player_api.js"></script>
<link rel="stylesheet" href="https://sproutvideo.github.io/sproutvideo-player-api/assets/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<script src=""></script>
<script>
videojs.options.flash.swf = ""
</script>
<!-- <script src="../videojs.watermark.js"></script> -->
<!-- For debugging -->
<script src=""></script>
<style>
p {
background-color: #eee;
border: thin solid #777;
padding: 10px;
}
</style>
</head>
<body>
<p>The watermark plugin display an image or text over the video. Give it a shot:</p>
<iframe id='video_1' class='video-js vjs-default-skin' src='https://videos.sproutvideo.com/embed/709adcb31f19e5c6f8/cd8cf2e796aa69d3' style='width:100%;height:500px;' frameborder='0' allowfullscreen></iframe>
<script>
// initialize video.js
var my_video_id = videojs('video_1');
// Set value to the plugin
my_video_id.watermark({
file: 'Owned_Stamp.png',
xpos: 0,
ypos: 0,
xrepeat: 0,
opacity: 0.5
});
</script>
</body>
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2pvbdPw
via IFTTT
Aucun commentaire:
Enregistrer un commentaire