Create a suspension toolbar on web video
Create Toolbar overflow Video on WebPage
A few days ago studied the video control on the JavaScript script operating web page. Because the designs need, you want to add a pop-up toolbar on the video window, similar to the REALONE full-screen button, when the mouse moves to the video area, the toolbar It can be popped, more than a certain period of time, and the tool bar can be automatically hidden.
However, in the test process, the Windows MediaPlayer control is used, which seems to be covered by the video window. On the Internet Google two days, no good solution, discovered a post, very shameless, But almost let me lose confidence: http://www.milonic.com/mfa/2004-july/004569.html;
Later, I decided to change the plan, I want to make an ActiveX control, encapsulate the WMP, and then implement the pop-up menu in my own ActiveX control. When this idea implements half, in one test, in order to prohibit the full screen of the WMP window, I Setting the WMP control property to "", when the page preview effect, the DIV discovered on the page appeared on the Video window. This is what I concluded: When you have full-screen functions, the WMP video window is a TopMost window (so that he can full screen), causing other windows that cannot be displayed. Here, I gave up the encapsulated ActiveX and resume it with JavaScript to write control scripts. The following code is a prototype, you can pop up a box button in the upper left corner of VIDEO, click the button, VideoO starts playing or pause.
Demo page </ title> <head> </ head> <body οnlοad = "OnLoad ();> <Table ID =" Table1 "> <TR> <TD> <DIV ID =" Div1 "> <Object classid = CLSID: 22D</p>
<p>6f</p>
<p>312-B</p>
<p>0F</p>
<p>6-11D0-94AB</p>
<p>-0080C</p>
<p>74C</p>
<p>7E95 width = 240 height = 160 id = "Object1" Viewastext> <param name = "mute" value = "1"> <parame name = "showcontrols" value = "0"> <param name = "showPositionControls" value = " 0> <param name = "showaudiocontrols" value = "1"> <param name = "showTracker" value = "0"> <param name = "showdisplay" value = "0"> <param name = "showstatusbar" Value = "0"> <param name = "showgotobar" value = "0"> <param name = "showcaption" value = "0"> <param name = "autostart" value = 1> <param name = "volume" VALUE = "- 1000"> <parame = "AnimationATStart" value = "0"> <param name = "transparentatstart" value = "0"> <param name = "allowchangedisplaysize" value = "0"> <param name = " Allowscan "value =" 0 "> <param name =" enablecontextme Nu "value =" 0 "> <param name =" clicktoplay "value =" 0 "> <param name =" currentPosition "value =" 0 "> <param name ="</p>
<p>WindowlessVideo "value =" 1 "> <parame name = filename value = somefile.WMV> </ object> </ div> </ td> </ tr> </ table> <script language =" javascript "> var src = document.getElementById ( "table1"); var objDragItem = document.createElement ( "DIV"); objDragItem.objVideo = document.getElementById ( "Object1"); var Container = document.getElementById ( "div1"); objDragItem.div1 = Container; objDragItem.style.fontSize = "1px"; objDragItem.style.height = 20; objDragItem.style.width = 100; objDragItem.style.background = "#DDDDDD"; objDragItem.style.fontColor = "# 0000ff"; objDragItem.style.position = "absolute"; objDragItem.style.filter = "progid: DXImageTransform.Microsoft.Alpha (opacity = 60)"; objDragItem.objVideo.style.position = "absolute"; objDragItem.objVideo.style.pixelTop = 0; objdragitem.objvideo.Style.pixellef t = 0; objDragItem.objVideo.style.zIndex = 0; objDragItem.style.borderStyle = "solid"; objDragItem.style.borderWidth = "1px"; objDragItem.style.pixelTop = 0; objDragItem.style.pixelLeft = 0; Objdragitem.Style.zindex = 1;</p>
<p>objDragItem.onmousedown = mousedown; objDragItem.objVideo.onmousedown = mousedownvideo; objDragItem.objVideo.onmousemove = mouseovervideo; objDragItem.objVideo.prnt = objDragItem; src.insertBefore (objDragItem); var leave = 0; function mousedownvideo (e) {this. Mute =! This.mute;} function mouseovervideo (e) {leave = 0; if (this.prnt.style.display == "none") {this.prnt.style.display = "";}} function mousedown e) {leave = 0; state = this.objvideo.PlayState; if (state == 0) this.objvideo.play (); else if (state == 1) this.objvideo.Play (); else f == 2) this.objvideo.pause ();} var time = 0; var interval = 1000; Function OnLoad () {WINDOW.SetInterval ("Ontimer ();" "{VAR CT = Document.GtelementByid (" DIV1); "DIV1"; "DIV1"; "Div1";</p>
<p>Leave ; if (Leave> 3) {Objdragitem.Style.Display = "none";}} </ script> </ body> </ html></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-131065.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="131065" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.048</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = '6aRZRfHBQMkgyc6U6ZzKXWHPlDmMDrVpF4lghcOyZNO5Naqh93H3_2Bd7v8EJrc2b6SiYz1dX4ELYKoYPRm2fjKw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
