Альтернатива для проверки простоя браузера

У меня есть простой веб-киоск, который отображает приглашение пользователя через 30 секунд, когда мышь не двигается с помощью jQuery.

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

Киоск - стенд для выбора видео. Видео воспроизводится в полноэкранном режиме, и я столкнулся с проблемой, когда действие отображается под видеокадром, потому что мышь не двигалась.

Есть ли способ проверить активность браузера с помощью JavaScript, кроме событий мыши или ключа?

Источник

2 ответа

Решение

В зависимости от того, как вы воспроизводите видео, переключите глобальный флаг, videoPlaying, на видео воспроизведения / паузы. Затем;

$("#body-wrap").mousemove(function() {
    clearTimeout(i);
    $("#overlay").fadeOut();
    i = setTimeout(function() {
      if(!videoPlaying)
        $("#overlay").fadeIn();
    }, 30000);
  })
Источник

Видео воспроизводится в полноэкранном режиме, и я столкнулся с проблемой, когда действие отображается под видеокадром, потому что мышь не двигалась.

Если проблема в том, что сообщение для пользователя отображается ниже <video> элемент, когда пользователь запросил полноэкранное отображение, вы можете использовать <track> элемент с src установлен в .vtt файл или .addTextTrack() метод HTMLMediaElement, VTTCue(), .addCue() добавить cue сообщение для отображения на <video> элемент в определенное время.

использование loadedmetadata а также ended событие HTMLMediaElement установить, сбросить TextTrackCue, Также установить, сброс cue до 30 секунд от текущей активности пользователя на mousemove обработчик события.

Вы можете просмотреть связанный PLNKR на новый window кликнув "Launch the preview in a separate window" значок, затем нажмите <button> элемент с текстом "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>

Источник
Другие вопросы по тегам