add video embed for dailymotion, youtube, vimeo
authorymh <ymh.work@gmail.com>
Wed, 13 Sep 2017 18:30:50 +0200
changeset 654 b2789b4cd389
parent 653 bc81800e587b
child 655 8917ba481609
add video embed for dailymotion, youtube, vimeo
client/templates/nodeeditor_video.html
--- a/client/templates/nodeeditor_video.html	Thu Jan 12 14:22:21 2017 +0100
+++ b/client/templates/nodeeditor_video.html	Wed Sep 13 18:30:50 2017 +0200
@@ -1,3 +1,41 @@
+<%
+function get_youtube_id(url) {
+    var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+    var match = url.match(regExp);
+    if (match && match[2].length == 11) {
+        return match[2];
+    } else {
+        return false;
+    }
+}
+
+function get_vimeo_id(url) {
+    var regExp = /https?:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
+    
+    var match = url.match(regExp);
+    
+    if (match){
+        return match[2];
+    } else {
+        return false;
+    }
+}
+
+function get_dailymotion_id(url) {
+    var regExp = /^(?:(?:http|https):\/\/)?(?:www.)?(dailymotion\.com|dai\.ly)\/((video\/([^_]+))|(hub\/([^_]+)|([^\/_]+)))$/;
+
+    var match = url.match(regExp);
+
+    if (match) {
+        if(match[4] !== undefined) {
+            return match[4];
+        }
+        return match[2];
+    }
+    return false;
+}
+
+%>
 <h2>
     <span class="Rk-CloseX">&times;</span>
     <% if (options.show_node_tooltip_color) { %>
@@ -11,9 +49,25 @@
         <% if (node.uri) { %></a><% } %>
     </span>
 </h2>
-<% if (node.uri && options.show_node_tooltip_uri) { %>
-     <video width="320" height="240" controls>
-        <source src="<%-node.uri%>" type="video/mp4">
-     </video> 
-<% } %>
+<% if (node.uri && options.show_node_tooltip_uri) {
+    var video_id = false;
+    if(video_id = get_youtube_id(node.uri)) { %>
+        <iframe width="255" height="143" src="https://www.youtube.com/embed/<%=video_id%>" frameborder="0"></iframe>
+        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
+    <%  }
+    else if(video_id = get_vimeo_id(node.uri)) { %>
+        <iframe src="https://player.vimeo.com/video/<%=video_id%>" width="255" height="143" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
+    <%  }
+    else if(video_id = get_dailymotion_id(node.uri)) { %>
+        <iframe frameborder="0" width="255" height="143" src="https://www.dailymotion.com/embed/video/<%=video_id%>?autoPlay=0" allowfullscreen=""></iframe>
+        <p><a href="<%-node.uri%>" target="_blank"><%-renkan.translate("Link")%></a></p>
+    <%  }
+    else { %> 
+        <video width="320" height="240" controls>
+            <source src="<%-node.uri%>" type="video/mp4">
+        </video>
+    <%  }
+    }
+%>
     <a href="#?idnode=<%-node._id%>"><%-renkan.translate("Link to the node")%></a>