I have been writing the final project assignment in Java for a while, and then I intend to implement the movie and television station in Java. The front end is filled with ajax calls, and then the problem that has puzzled me is finally solved at this moment. It was originally done by the front end. As for my front end dish B, this problem is really difficult for me to add one night in the afternoon, but it was solved, It is hereby recorded.
The original functions to be realized are as follows:
Click the play button below to pop up the corresponding video link.
The entire page is filled with the latest four videos requested by ajax, and the video list is filled through template-web.js The plug-in adds, so all ID values are the same. At first, an event is added to the button, and the result is that all play buttons play the first video! So, I thought a lot of ways to make the ID attribute into the attribute value of the dynamic ajax request, realizing that each ID is different. Next, because clicking play needs to call a method to analyze the video play, and splice it into API+video link The format of is displayed in the newly opened pop-up window. See the following figure for details:
To click different buttons, and the button ID is dynamically obtained from the ajax request, add the click video splicing video link. Refer to the article, you can obtain the ID value of the click button, and then use the button to place the link in the value
The ID attribute of the Dom object can obtain the ID value of the element. The key codes are as follows:
<!-- HTML structure --> <button id="testid" type="button" onclick="play (this)" value="dynamically acquire id value">play</button>
//Javascript code function play(obj){ alert(obj.id) }
Finally, transform my code, and finally realize the splicing. Layui used
<button id="{{dId}}" type="button" onclick="play(this)" value="{{dUrl}}" class="layui-btn-sm layui-btn layui-btn-radius layui-btn-warm">
function play(obj){ var bfurl = obj.value; Console.log ("Playback address:"+bfurl+"id:"+obj. id); Var api="Video resolution interface XXX"; layui.use(['element', 'form', 'layer'], function() { var element = layui.element, $ = layui.jquery, form = layui.form, upload = layui.upload, layer = layui.layer; layer.open({ type: 2 , title: "Play interface" ,content: [api + bfurl, 'no'] ,area: ['1060px', '640px'] ,maxmin: true ,closeBtn: 1 ,success: function(layero, index){ $('iframe').attr('allowfullscreen','true'); } }); }); }
Reference article:
https://zhidao.baidu.com/question/60814475.html
https://blog.csdn.net/liufeilong_sean/article/details/20120555
https://blog.csdn.net/qq_40557339/article/details/79019843
