4

I have a simple web kiosk that displays a user action prompt after 30 seconds of the mouse not moving with jQuery.

var i = null; $("#body-wrap").mousemove(function() { clearTimeout(i); $("#overlay").fadeOut(); i = setTimeout(function() { $("#overlay").fadeIn(); }, 30000); }) 

The kiosk is a video-selection stand. The video is played full screen and I'm running into an issue where the action is displayed beneath the video frame because the mouse hasn't moved.

Is there a way to check for browser activity with JavaScript other than mouse or key events?

6
  • I doubt it. See stackoverflow.com/questions/667555/… Commented Sep 18, 2016 at 3:26
  • How is "browser activity" determined? Do you want to prompt user every 30 seconds? Commented Sep 18, 2016 at 3:39
  • @guest271314 It's a pseudo-screensaver. If the mouse hasn't moved, it's there so people know how to interact. But, if a video is longer than 30 seconds (they are) it kicks them back to that prompt. So, there is no user activity, but the browser window is definitely active. Commented Sep 18, 2016 at 19:09
  • Should the prompt occur every 30 seconds until end of video? Commented Sep 18, 2016 at 19:19
  • @BrianBennett Is the issue with approach at Question is that during full screen the prompt is displayed outside of the full screen viewport? Commented Sep 18, 2016 at 20:54

2 Answers 2

2

The video is played full screen and I'm running into an issue where the action is displayed beneath the video frame because the mouse hasn't moved.

If the issue is message to user being rendered beneath <video> element when user has requested fullscreen display, you can use <track> element with src set to .vtt file, or .addTextTrack() method of HTMLMediaElement, VTTCue(), .addCue() to add a cue message to be displayed at <video> element at specific time.

Use loadedmetadata and ended event of HTMLMediaElement to set, reset TextTrackCue. Also set, reset cue to 30 seconds from current user activity at mousemove event handler.

You can view the linked plnkr at a new window by clicking "Launch the preview in a separate window" icon, then click <button> element having text "toggle fullscreen".

<!DOCTYPE html> <html> <head> <style> ::cue { background: transparent; } ::cue(.prompt) { color: #d81159; background: transparent; text-shadow: 2px 2px 2px #ffbc42; font-family: Menlo, Sans, Monospace; font-size: 36px; display: block; width: 100px; } ::cue(b) { display: block; width: 100px; } </style> </head> <body> <button> toggle fullscreen </button> <br> <video width="320px" height="280px" autoplay="autoplay" controls="controls" src="http://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4" poster="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXsAAAA8CAYAAACHFBprAAAABHNCSVQICAgIfAhkiAAAHepJREFUeJztnXlUVEfWwC/dLM3WsogoYkQ2FQMSREUjGsgYo6IxHjDGfZuRaBT3oOjJYEYjZxIDOtHMUSIuIzijxI1FiUsQEUQdRBQU3BBRQBBlE2y43x/5YICuqve66dYo9TunzoF6t+pWV9W7r1699+7VQUQEDofD4bzVSF53AzgcDoejfbix53A4nA4AN/YcDofTAeDGnsPhcDoA3Ni/ARQUFMC4ceOgU6dOYGdnB5s2bYLGxsbX3SzOG05ycjJ4enqCsbExuLm5wfHjx193kzhaREfs2zgXL16E1NRUsLS0BD8/PzA3N9d22zj/j7e3N6SkpLTK27p1K3z55ZevqUWcN50nT56As7MzPH36tDlPV1cXMjIywN3d/TW2jKMtRK3sV69eDYMHD4alS5fCjBkzoF+/fpCdna3ttnEAoLCwUMnQAwDs27fvNbSG87aQmJjYytADACgUCoiJiXlNLeJoG0Fjf+nSJdi0aVOrvEePHsEXX3yhtUZx/kdWVhYx/9GjR9QyL168gJCQEHB0dITOnTvD6NGj4dKlS9pqIkcDREVFgYeHB1haWoKnpydER0drVZ8684rzZqMrJHD+/Hlifnp6OigUCtDVFayC0w4ePnxIzKf1OyKCn58fnDp1qjkvMTERzpw5A2fOnIEhQ4ZopZ0c9Vm/fj18/fXXzf+Xl5fDlClT4PHjx7B06VKt6FR1XnHefARX9s+ePSPmv3z5Eurr6zXeIE5rSkpKiPkymYyYn5CQ0MrQN1FXVwdr167VaNs47aeiogI2bNhAPLZu3Tqora3Vil5V5xXnzUfQ2LOe30ok/GUebVNWVkbMNzY2Jubn5uZS62Id47we7ty5Q100VVdXQ2FhoVb0qjqvOG8+gtaa9Yqfjo6ORhvDUaaiooKYb2JiQsx3dHSk1uXg4KCRNnE0h52dHXXrRCaTQffu3bWiV9V5xXnz4Sv7Pzi0k7JTp07E/LFjxxL35XV1dSE0NFSjbeO0HwsLC+q+/Jo1a8DIyEgrelWdV5w3n3at7Lmx1z7Pnz8n5puZmRHzpVIpJCUlwapVq8DOzg7kcjn4+PhASkoK+Pj4aLOpHDUJCwuDnTt3gqura/MHTnv27IF169ZpTaeq84rz5iP46J21sufbONqnsrKSmM/6qM3Y2BjCwsIgLCxMW83iaBAdHR2YO3cuzJ0795Xoq62thYaGBuIx/rHk24vg0lyhUJALSiR8Zf8KqKqqIuZbWFi84pZw3hZocwqAz6u3GUFr/fLlS2K+np6exhvDUaa6upqYb2lpqTEdiYmJMHbsWOjfvz9MnDgR0tLSlGTOnTsH8+fPBxcXFzA1NQVLS0twd3eH4OBguHfvnsbawtE+tDkFoNl5xfljIbiN80cw9rm5uXDw4EFITk6G3NxcKCsrg8bGRrCxsQEHBwfw9/eHSZMmaWS/MS0tDY4ePQoXLlyAvLy8Zl3W1tbw3nvvwahRoyAgIACsrKzU1lFcXAzx8fEQHx8Pt27dguLiYigrKwMjIyOwsbEBDw8P8Pf3h/Hjx1NPTKEVWFZWFty5cwecnZ3BxcWFKnfw4EEICAhoVS4hIQEyMzOhd+/ekJ+fD4sWLYLExESlsuXl5XD16lWIiIiAvXv3gr+/v8geUKaxsRHu3LkD9+7dg6dPn0JdXR3I5XKwsrICd3d3MDQ0VLtuddm5cyds3rwZ7t27B25ubrB161YYOHCg6PLFxcUQGBgIv/76K1hYWMDMmTMhJCQEDAwMlGQLCgogMzMTrKysYNCgQSCVSlVub25uLhw/fhySkpKgoKAAiouLobKyEuRyOdjb24OXlxdMmzaN+caNqiv7rKwsOHv2LNy8eRPKy8tBoVCAsbExWFtbg4ODA3h5eYGrq2u7t3x/++03OHr0KKSlpUF+fj48e/YM9PX1wdbWFlxdXWHKlCkwZswYvghlgQLMnz8fAUApmZubCxVtN9nZ2fjxxx8T9bdNFhYWuH//frV1RUdHY79+/UTp0tPTwylTpmBOTo5KOkpKSnDhwoWoq6srSk///v1RX1+feCwpKYmoo66uDj/55JNWsjNmzMDGxkaivJeXF7H+r7/+GhMSEtDExERUW3V0dPDMmTMq9Ud1dTVGRkbimDFjUC6XM/v7o48+wtOnT6tUf3vYuHEjcc6XlJSIKq9QKHDgwIFKdXz22WdKshs2bECpVNosM2DAAHz8+LHotmZlZYk+TwAABw0aRD1WX18vqK+hoQF37dqFLi4uovTZ2NjgunXr8NmzZ6J/UxPHjh0Tradfv354+fJllXV0FASN/Zw5c4gd26VLF6027Mcff6QaOlZatWqVSnoePHiAPj4+KusBAJRIJBgaGko1pC2Jj49nGjRVE21Sh4WFEeV37NhBlLexsSHK29rair4oNaU+ffrgy5cvBfuirq4Ow8LC0NzcXOXfHRISglVVVYI62kvXrl2J+levXi2q/KFDh6i/obi4uFkuLS2NKDN16lRRetavX48SiUQjc8rU1FRQX0FBAb7//vtq1d+9e3f89ddfRf2uuro6nDt3rso6dHV18ciRI6J0dDQEjf306dOpA6ctQkND2zVpN2/eLEpPWloaWllZtfsk+e6775h6IiMjVTacQunu3btEXaNHjybKT5kyhShvb2+v0XYlJCQw++LWrVvo7u7eLh36+vq4YMECrKurEzXO6mBpaUnU3blzZ6ytrRUs/+GHHxLL6+joYGlpabMc7eJsY2PDrF+hUOC8efM0OnY9e/Zk6szJycHu3bu3S4eRkRGmpaUx9dTV1eGoUaPU1mFoaIjnz58XHKOOhqCxDwgIIHaog4ODVhq0e/fudk9aPT09wS2W1NRUNDY21shJ0qdPH6qekydPamzl1TKVl5cT9Q0ZMoQoP378eKK8m5ubRtu1cOFCal9cunSJakTVSWIv6uowc+ZMqt49e/Ywy966dQt1dHSIZT/44INWsqtXrybKyeVypo61a9dqfE65ublR9RUXF2PPnj01omfgwIHM3zZ79ux263B0dMQXL14w9XQ0BI29n58fsTPfffddjTfmwYMHoveIhdKoUaOoeu7evYsWFhaCdVhYWOCHH36IkyZNQjs7O6rcsGHDiHqKioqwS5cuotqr6gVBoVAQdXp4eBDlAwICiPJDhw4VrdPMzAxDQkIwKSkJAwMDiTKDBw+m9kW3bt00apzaGk5NkpqaqvJ4N7Fy5Upq2bYXimXLlhHlrKysqPUnJSWJni+qzCtvb2+qzokTJ2p07LKzs4l6fvnlF43p+Pbbb5nj1NEQNPa021Ghq7M6CE0oFxcXDA8Px1OnTuHJkydx8eLFzMl88+ZNJR2NjY2CBs7Z2RkPHz7cav+5uLiYKh8dHU38PX/+85+pZUxNTTE4OBgvXLjQ/OCqrKwMT548Sb3ANiUjIyNqH/bu3ZtYZtasWUT54cOHizpx3NzcWm0d5eTkEOUsLS2VdNTX1wv2uYeHB4aHh+O1a9ewrKwMq6qq8NKlSxgcHEy9A2PdUWkC1l0P7c5RoVBQ9/stLCyUtoBoL0DY2dkR629oaKCOcVO5iIgIvHHjBtbU1GBjYyMWFRXh7t270dXVlTkGY8aMIeo8duwYs9zkyZMxOTkZnz9/jtXV1Zifn49xcXE4derUVg+eW6bY2FglPVVVVfjOO+8wdY0cORKjoqIwOTkZf/nlFxwzZgxVtkePHtjQ0KDiqL+9CBp72kk6fPhwjTYkKyuLOch/+ctfiG8KREVFUcusWbNGSf7nn39m6pk0aRLx9i8lJYVaJjc3V0m+qKgIDQwMiPL9+/fHhw8fMvtj06ZNVH2sVR9t9bx48WKiPG3bp2VydHRs9VAREfHhw4dU+bb9t337dqqsvr4+7tixg/mQe+TIkcSyHh4ezD5sL6x2r1y5kliGZRiXL1+uJP/5558TZWlbKqwHv1OnTmU+x6ipqcFPP/2UWp5290e7SEgkEuqWVn5+Po4fP56q69ChQ0pltmzZQpWXSqX4888/E3Wxtn1OnjxJ7Y+OhqCxf++994idyNomUYcvv/ySOmCjR49mGoPBgwcTy7W93W5sbERHR0eqnokTJ1L1/Otf/6KWq6mpUZL/5ptviLLm5uZYVFQkqk9oJybrQZpMJiOW+frrr4ny/fv3Zxp6PT094ps/ubm51DItLwz19fXU1ZpUKhV8oIuI6OTkRCzv5+cnWLY9VFZWoqmpKVG3tbU18c0j2l2ZRCLB27dvK8nTXpkcMWIEsU20O+2hQ4eKWsU+f/6cuvc+c+ZMJfnz589Tx3nDhg1K8oWFhbhw4ULmm3RSqRTv37+vVJZ158HakikvL6fO+7Vr1wr2SUdB0NjTbhk//fRTjTaE9laMvr4+cWK05PvvvyeWNTIyarW3ffbsWepk6tWrF1ZWVlJ1bNu2jVjO0NCQKD9ixAii/MaNG0X3CW2l4+joSJSvra2l/r7w8HBiGQcHB6axJ90dISJevnyZWqbleEVHR6tcd0saGhqod0hBQUEierF90J5NAAAePXq0leyDBw+o2xa0B+S0hcqECROUZGtra6l9kZqaKvo30bZL582bpyRL24rs27dvq3Pr+vXrOG/ePFGvS8+ePVtJT3Z2NlXexcVF8EI2btw4YllNL0rfZATdJdAccZmamgoVFc3t27ehtLSUeMzf3x/eeecdZnnaV401NTWtgjTEx8dT6wgNDWV+WUjzEUQqU1dXB+np6UT5GTNmUHW0BSlO6GhfV5aXl1Pron0ZSXN1CwBgZWUFwcHBxGMs/yotv7omfXkL8Pv8odXdkgcPHkBdXR3xWJ8+fQTLtxdWrOWoqKhW/+/YsYPqYCwoKIiYTxsz0nilp6cT+8LR0VGlcJOqzKvk5GSibHBwMEgkEoiLi4OPPvoI+vXrBzt37hSMXjdkyBD4xz/+oZRPctHRxJIlSwT9cNFsQEFBAbNcR+IPYeyvXLlCPTZhwgTB8qwAD0+fPm3+mxZ028TEBD777DOmDlq4NtLn2Xfv3oUXL14o5dva2qoUjILlXpoEzW0tAIBcLlfKQ0SmsV+4cCF1nGnzoi2kEIkAAAEBAaLmUH5+PvWYk5OTqDa0Bzc3N6ohPX78eLOxVigUEBkZSZRzdXUFX19f4jHamJHGKycnhyjr5eVFzKchdl6Vl5fDrVu3lPL19PSgqKgInJ2dwc/PD5KSkkTVN2fOHDh9+jTRR7+2bEDL87+jwzT2iEj1zaJJY//kyRPqsQEDBgiWJ50YTbRcCd29e5coM2zYMNDX12fqoAV1IK2SaL+HFUVKbN0A9JOV5eCKdIJVVFRQV6JSqRTmz59PrY+lq2mFWF5eTg2r5+3tTS3fElYoxVcVeSswMJCYX19fD9HR0QAAcPjwYWoQb9qqHoDej6TxetXzKjc3lyj78uVLWL16NfNC3JLBgwfD2bNnITIykrpoov22Hj16iPJDRbMBtLvCjgjT2NfU1FANiyaNPctwdO3atV11t/TPTVtF2draCtZD8wZIchRHi+/JuiiRoJ2UNAPNmtikk4x1kfXx8WH2Pa0NAP8z9rStOQAAZ2dn6rGWZGVlEfP19fUFt/c0xaRJk6jbYLt37wYAgK1btxKPd+nSBaZNm0atmzZmpPF61fOqvaviYcOGQUJCAqSlpcGIESOYsjQboMnzv6PDNPasW3VVJxizEYz9ODFe7Fh71S0Hm7Z6F1rVAwBYW1sT82tqapTyaL+ntrZWUI8YaM8PVI0XzOo3Pz8/ZhtoKzSA//1OlrEXexLSbu/t7OxeWTwFmUwGM2fOJB7LyMiA/fv3U/e2FyxYQPRy2QRtzEjj9arnlTrGXiqVgr+/P1y4cAHOnTsHH3/8sahytN8m1oslbS5zY/8/mGcLa7Bpxk8dbGxsqMeKi4sFy2dnZxPzbW1tWz1ApblAZu1bN9GtWzdifk1NjdLqrEuXLkTZrKwslffhSdAegrHc4pL0ssa3R48ezDYYGxtTjzUZedpFCYB9Z9DEw4cP4b///S/x2KsOnk7bygEAmDdvHjFfJpPBggULmPXSxow0XrR5lZmZydQhlrbzShV3wXK5HJYuXQr5+fnwn//8R+XnCDQbIOb8B6DbgL59+6rUjrcZprF/9uwZ9Rht4qkDy7CkpKQIlj948CAxv+2DNdpWzM2bNwV1WFpaUn2qt92Xpv2e4uJiiIuLE9TVhKorOdbJSdpuYj3QFdraYo3//fv3AYAdCOPx48fM+gEA/v73v1MvCnZ2doLlNYmzszM1hi9tPKZPny6430wbM9J40eZVXFycqP5sQuy8oi1wWtKrVy/44YcfoLCwEDZv3qz2uNB+2+3bt+HRo0fMsgqFAo4cOUI8pspbSm87ahv7zp07q6yssLAQ9uzZA2FhYZCamtqc7+HhQTWkW7ZsYcbBzcjIgAMHDhCPtX0Dws3NjSiXmZnJ3HJogmYAb9y40ep/Gxsb6muBQUFBzL3yJhARMjIyiMdo+5uqGnvSFlQTQhGLWBeDvLy8Zhla0Araq6lNnD9/Hn788Ufq8dcRPo/1wLotOjo6sGzZMkE5VYy9r68vsT9ramogMDBQ1F1jRUUF8Q0bAOV5xTLc7u7ucPDgQcjLy4MlS5aIfoZXUVEBRUVFSuf0sGHDqGUiIiKYdUZERFBfsaRdoDskrJfwY2JiqB86PHr0SNSL/JmZmRgaGooDBgxQqiM0NLRZbuzYsVRdK1asINadlZVF9cdubGyMFRUVreRZHjW/+uor5u8oLS2lfoC0aNEiJfkVK1ZQdbX1M9OWJ0+eCPrHIX21S/NXAwB4+PBhJfl//vOfVPmWbnhpGBoaEsu2DNBBc2fs6OhIDZRx69Ytqn+ZpiTkVlob1NXViXaJPXbsWFF1WltbE8svWbKEKO/p6UnVOXnyZKyurqbqunr1KtOvzqBBg5TK0L5qtbGxUSlQyOnTp9HX17fZG6irq2urOfby5Us0MzMj6pJKpcT5i/i7jaK5D3///fdFt68jwDT2LGNA8un94sULvHz5MoaHh+PEiRMFTwypVNrsUCo2NpYp6+PjgwcOHMCLFy9iXFwcfvHFF9SvCQEA58+fr9S+oqIi1NPTI8pLJBL86aeflMrU1tbi9u3bmcZHLpfj8+fPW5W7f/8+s33Gxsa4YsUKTE1NxZKSEiwpKcGsrCzcvHkz1QC0TAUFBUptvX37NlX+3//+t5I8y0+QkO8eRKRGEGrp12XdunVUHbNmzVKaR6dOnRI09ACAO3fuFGyfNli1apUoY3/27FlR9fXo0YNYfsGCBUT5AwcOMPXa2tri999/j9nZ2VheXo5FRUWYmpqKy5cvZ85HAEB7e3slfX/729+o8rq6ujh37lzMyMggfuFaVVWFsbGx6OvrSywfFhbWSn7x4sVUXRKJBOfMmYMJCQmYnp6OMTEx1K9mmxLNQWFHhWnsaYEVJBIJfvfdd7h27VpctGgRfvLJJ+jk5ET9VJyVWhpYVrg0VZKFhQU1fNykSZOYZR0dHXHKlCk4Y8YM9PX1pa5e2yaSb3XW6r696cKFC0r6CgoKqPL79u1Tkj969ChV/sqVK4KTh3b3YWJi0ixTUlKCRkZGVD02NjY4e/ZsDAoKwmHDhon+/SRHWq+CvLw8qq/6pkRaIdOgBY8huS5A/N2/EyncoSaSTCZT8g1VWVlJvSC1TGZmZti/f3/09fVFb29vdHZ2FrQHbf3WFBcXa8zFube3t6gIci25fv067tu3D2NjY7GwsFClsiQaGhowJSUFd+3ahYmJiUoLwlddJ9PYBwcHa81YNaWoqKhmfVeuXGEaBrGJ5h0P8fetH6EVjjqpZ8+eSj7ma2trqTFe25v27t2r9NsePXokqp+bSE9Pp8rHxcUJTh7WSqzlJGStDtVNp06dEmyftqA5I2tKBw8eFF2Xqi6pEX/3KKnJIDAt04MHD5T0xcfHayUAz4kTJ5R0/fTTT+2uVyaT4fXr10WPQVVVlZL3UQMDA/zmm29E19GWmzdvKm25WVtb47Fjx15bnUxjT4uio6lkZWWFT58+baXz0KFDgisnVmJFSmoiPDxcK7+HtK9YXFyMzs7OGtdFiilbWlpKlY+MjFSSz8vLo8qT7gTaEhERQS3fcmXU2NjI9DuuTnqdgaVZz7J69+6tkg91WpD76dOnM8udO3dOY6vglikvL4+oLzo6WqOhNWnulBERg4KC1K5XIpHggQMHRPc/IuK0adOo9alzB1lfX0+9YzM0NFTrrkETdTKN/a5duzQ+mZqSl5cXNVpNbGysWhN52bJlom/dvv32W7UuKqxb04iICKKup0+fMh9AsxLpoZWBgQHxpGxoaKDeGZFWUbW1tdQTWMye85kzZ4hldXV1lXzaV1dXM32pk5KJiQn1oR3NKL0K6urqqHEDaN5FadBcHIsJbH79+nW1FxKkfnVycmKeP0lJSe0OTSiRSDAoKIgZmL6hoQFDQkJUPj8NDQ0xJiZGpf5vaGigPscDAJwzZ45K9SH+fiFmtVMorKW26mQa+ydPnmh09eDk5IRLly7FS5cuCTYsJyeHGjy7berVq5daEeWTkpJEPycwMzPDpUuX4r1793D37t1KW0FyuZz5hk1jYyPu2bOH6pu9bTI2NsY1a9ZgdXU1LliwoPk2unPnzsxtApJLXicnJ+LbO4jkVY2bm5uoYN4vXrwg+qqnbUE0NjbiDz/8gJ07dxb8/S4uLpiZmUk1qrRnMq8K0kJILpervGoj3SUYGBhQF0Jtef78OYaGhqK5ubmoeWVra4tRUVFYVlaG3t7ezfnvvvsuXrt2TVBfdXU1hoaGqhx4XCaT4eeff67S9kp8fDz1JYC2afjw4aLaT4L1QoTQW3okWG/FAYCoGA7aqFPQn/2BAweYVz5aMjQ0xEGDBmFgYCDu2bOHaQhZXLx4Eb/66iv09PREa2tr1NXVRWNjY+zbty/OmDEDY2NjmasEMSQnJ+PatWtxxIgRaGdnh3K5HPX19dHOzg6nTp2KMTExSm+NXLt2Df/0pz+hsbExent7Y3p6uihdCoUCT5w4gcuWLcNBgwZhjx49UCaToZGREdrZ2eHEiRNx27ZtzaEKmygpKcGcnBzq64pN1NTU4IoVK7B79+7YqVMnHDduHDFoRhOVlZW4aNEi7NatG1pYWGBAQIBKBisrKwt9fHzQ1NQUu3fvjsuXL2e+/of4u4GKjIxEf39/dHR0RLlcjgYGBmhra4sTJkzAvXv3okKhwPr6euJesVQq/UOEm9u5cyc6Ozs3z/WUlBS16+nTpw8aGRnhwIED1Xoe8ezZM9y/fz/OmjULXV1d0draGvX09LBTp07Yt29fnD17Nh46dEjpXLlz5w7euXNH5YeZTfM4JCQER44cifb29mhhYYG6urook8mwa9euOHToUAwMDMSYmBil16DF0tDQgEeOHMF58+ahi4sLmpubo1QqRTMzM/T09MSgoCDiywqqQIt217VrV1FvpZGgRc/y8fFRe+62t04dRMYXS//PtWvXYMuWLfDbb79BYWEh1NXVgUwmA7lcDlZWVmBjYwM9e/YEe3t76N27N/Tt2xccHR2Zn+9zOEJcvnwZPD09lfJ79uwJ9+7de/UN4ry1nD59GtavXw+ZmZlgYmICI0eOhI0bN4r6iphEY2Mj7NixA7Zt2wb5+flga2sL06ZNg5UrVzL9SmmzTlHGnsN5HURERMCSJUuU8keOHAknT558DS3icN5cXo3bQA5HDfbv30/Md3d3f8Ut4XDefLix5/whOXHiBFy8eJF4TGzgEw6H8z/4Ng7nD8ft27fhgw8+IEa5kslkUFpayowXzOFwlNF93Q3gvP2cOHECrly5AgYGBmBvbw+urq7Qq1cvJVe7FRUVsG/fPvjrX/9Kjco0YcIEbug5HDXgK3uOVpk9ezZERUUp5ctkMnBwcABLS0uQSCRQWloKubm5zKAmOjo6kJGRISouMYfDaQ039hytcePGDejXr5/G6gsMDITt27drrD4OpyPBH9BytAYtoIQ6DB8+HMLDwzVWH4fT0eDGnqM1Bg4cCJ06dWp3PZMnT4bExERm4G4Oh8OGG3uO1rC0tISEhARwcnJSq/yAAQPgyJEjEB0dTQ1byeFwxMH37Dlap6GhAc6cOQNJSUlw9epVuH//PpSUlEB1dTW8fPkSpFIpmJiYgI2NDTg5OYGXlxeMGTMGXF1dX3fTOZy3Bm7sORwOpwPAt3E4HA6nA8CNPYfD4XQAuLHncDicDsD/AT6Hk7HN7cVHAAAAAElFTkSuQmCC"> </video> <script> var video = document.querySelector("video"); var button = document.querySelector("button"); video.requestFullscreen = video.requestFullscreen || video.mozRequestFullscreen || video.webkitRequestFullscreen; video.exitFullscreen = video.exitFullscreen || video.mozExitFullscreen || video.webkitExitFullscreen; var track = video.addTextTrack("captions", "prompt", "en"); track.mode = "showing"; var overlay = "<c.prompt><b>No browser activity<b></c>"; var isFullscreen = false; var currentCue; var duration; video.onloadedmetadata = function(e) { duration = this.duration; currentCue = createCue(30, Math.round(duration)); track.addCue(currentCue); } video.onended = video.onpause = function() { removeCues(track); console.log(track.cues); currentCue = createCue(30 , Math.round(duration || video.duration)); track.addCue(currentCue); } button.onclick = function() { if (isFullscreen) { video.exitFullscreen; video.setAttribute("width", "320px"); video.setAttribute("height", "280px"); isFullscreen = false; } else { video.removeAttribute("width"); video.removeAttribute("height"); video.requestFullscreen(); isFullscreen = true; } } window.onmousemove = function() { if (track.cues.length && currentCue && duration) { removeCues(track); currentCue = createCue( Math.round(video.currentTime) + 30 , Math.round(duration || video.duration) ); track.addCue(currentCue); } } function createCue(begin, end) { var cue = new VTTCue(begin, end, overlay); cue.line = 5; cue.size = 100; return cue } function removeCues(track) { for (var i = 0; i < track.cues.length; i++) { track.removeCue(track.cues[i]); } } </script> </body> </html>

Sign up to request clarification or add additional context in comments.

1 Comment

Excellent answer!
0

Depending on how you're playing the video, toggle a global flag, videoPlaying, on video play/pause. Then;

$("#body-wrap").mousemove(function() { clearTimeout(i); $("#overlay").fadeOut(); i = setTimeout(function() { if(!videoPlaying) $("#overlay").fadeIn(); }, 30000); }) 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.