OK, so I am a complete novice but I do try.. I've tried Googling for the answer but the majority of search results are similar but for a slightly different thing so I've been unable to find a solution. The majority of the search engine posts and solutions refer to copying the url of a webpage that you on. This isn't the case here.
My problem is that I want to be able to create a 'copy url' button on my local PC (not a hosted website but a local .html file) So here's what I've got.. a large list of local urls (media on a NAS) and a basic .html file to act as a menu. Currently I have a download button (working) and a stream button (also working). The stream button itself doesn't open up a media play and stream as you may think, instead it expands a hidden div and displays the url for the user to copy and paste into a media player.
It dawned on my that underneath the url it would be great to have a copy url button and although I had it working for a short time on one link I was unable to successfully replicate it on many links.
A little code..
<!-- Expanding text for Streaming Links -->
<script>
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = 'Stream';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = 'Stream';
}
return true;
}
</script>
<!-- Copy URL Script -->
<script>
function clipboard(){
alert("Function is running");
var dt = new clipboard.DT();
alert("Step 1 Variable DT has been created");
dt.setData("text/plain", "Fallback markup text.");
alert("Step 2 Fallback markup text Data set");
dt.setData("text/html", "<i>Markup</i> <b>text</b>.");
alert("Step 3 Text/HTML Data Set");
clipboard.write(dt);
alert("Content written to Clipboard");
alert("Finished");
}
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.8.6/clipboard-polyfill.js"></script>
<table style="width:100%">
<tr>
<td align="left" width="500px">Learning to draw</td>
<td width="80px">Part 1</td>
<td>
<form method="get" action="http://MYINTERNALNASIPADDRESS/shares/Animations/Kids/Learn2Draw-Part1.mp4" style="display: inline;"><button type="submit">Download</button></form> or <button onclick="return toggleMe('LTDPt1')" type="text" value="Stream URL" /><span id="toggle-icon">Stream</span></button>
</td>
</tr>
</table>
<p id="LTDPt1" style="border:1px solid black; background-color:#FFFFCC; padding:2px; text-align:center; display: none;">
To stream this episode now, copy and paste this URL into VLC Media Player,
<strong><em id="urlText" type="text" value="http://MYINTERNALNASIPADDRESS/shares/Animations/Kids/Learn2Draw-Part1.mp4">
http://MYINTERNALNASIPADDRESS/shares/Animations/Kids/Learn2Draw-Part1.mp4
</em></strong><br /><button onclick="clipboard()">Copy URL</button></p>As you can see something is not working correctly, I tried adding alerts to see where it was going wrong but doesn't even get to step 1!
I've worked this, reworked this, tried many many things and now I'm at the point of hopelessness! I've tried clipboard.js although when it comes to JS I get easily confused.
Yes the probably wont take id tag although I'm pretty sure it worked for one link like this late last night? I was tired so maybe I had just copied and pasted and that link was already in my clipboard.. I dunno.
Looking at my code there are probably bits and pieces left all over the shop. My apologies, I don't really know where else to turn to.
Thanks in advance.
