rtsp streaming vlc in html page; fullscreen function
Question
I am building a website that shows a live streaming video. I want to build a single button of it to make a fullscreen of this live streaming.
These are my code:
<title>VLC Mozilla plugin test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<!--param name="autostart" value="true" />
<param name="allowfullscreen" value="false" /-->
<embed type="application/x-vlc-plugin"
name="video2"
pluginspage="http://www.videolan.org"
version="VideoLAN.VLCPlugin.2"
autoplay="yes" fullscreen="false" volume="false"
width="720"height="480" id="vlc" events="True" src="rtsp://100.100.100/video.something"/></embed>
</object>
<button>
fullscreen
</button>
<script>
$( document ).ready(function() {
$("button").on('click', function(){
var video = $('object').find('embed');
console.log("founded");
video.fullscreen = true;
if(video.fullscreen === true){
console.log('fullscreen now');
} else
console.log('fullscreen not now');
});
});
</script>
</body>
it cant work properly. I am so thankfull for every single advice :)
1 answers
solution1
0 2016-04-13 14:19:37
solved guys! It is not a best way, but it works! I deleted the fullscreen='true' on the embed; put an id for it and my a new javascript.
here is the new one:
<title>VLC Mozilla plugin test page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<!--param name="autostart" value="true" />
<param name="allowfullscreen" value="false" /-->
<embed type="application/x-vlc-plugin"
id="vlc"
pluginspage="http://www.videolan.org"
version="VideoLAN.VLCPlugin.2"
width="720"height="480" id="vlc" events="True" src="rtsp://host/video.something"/></embed>
</object>
<button id="fullscreen">
fullscreen
</button>
<script type="text/javascript">
$("#fullscreen").click(function () {
var a = document.getElementById('vlc').video.toggleFullscreen();
});
</script>
</body>
but the problem is, it still shows a button fullscreen on the vlc plugin. I just still to find out how I can disable the fullscreen button on the vlc plugin and make my own button for this fullscreen.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.