Я хочу добавить водяной знак в видео, используя html5. Я использую Laravel 5.7 и плагины Video.js для этого. Но когда видео в полноэкранном режиме, водяной знак не отображается, но в обычном режиме отображается водяной знак.
У меня возникла проблема в полноэкранном режиме, когда я нажимаю на полноэкранное видео, водяной знак не отображается.
Как решить эту проблему?
Это мой код:
<!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="{{asset('video/video-js.css')}}" rel="stylesheet">
<link href="{{asset('css/videojs.watermark.css')}}" rel="stylesheet">
<script src="{{asset('video/video.js')}}"></script>
<script>
videojs.options.flash.swf = "{{asset('video.js/video-js.swf')}}"
</script>
<!-- <script src="../videojs.watermark.js"></script> -->
<!-- For debugging -->
<script src="{{asset('video/videojs.watermark.js')}}"></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>