Видеоплеер на JS

@SolDok · Регистрация: 27.11.2019

Студворк — интернет-сервис помощи студентам

Учусь HTML5 по учебнику Гоше.После ввода JS,далее пишется видеоплеер на нём.Написал(или правильнее переписал),код проверил.При открытии в браузерах html документа,видео продолжает загружаться на плеере браузера,а не на плеере документа. Пробовал запустить на chrome,ковырялся в flash player'е,вроде как выключил,но не помогло.Также пробовал на Edge и на IE.
Не могу понять в чём я косячу. Или в коде ошибка,или в браузерах дело?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Видеопроигрыватель</title>
    <link rel="stylesheet" href="player.css">
    <script src="player.js"></script>
</head>
<body>
<section id="player">
    <video id="media" width="720" height="400" preload controls loop>
        <source src="C:\Program Files\Sublime Text 3\HTML\Welcome.mp4">
    </video>
    <nav>
        <div id="buttons">
            <button type="button" id="play">play</button>
        </div>
        <div id="bar">
            <div id="progress"></div>
        </div>
        <div style="clear: both"></div>
    </nav>
</section>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function initiate(){
    // initiate так как она инициирует приложения после загрузки окна
    maxim    =600;
    mmedia   =document.getElementById('media');
    play     =document.getElementById('play');
    bar      =document.getElementById('bar');
    progress =document.getElementById('progress')
    // Объявили глобальные переменные
 
    play.addEventListener('click', push, false);
    bar.addEventListener('click', move,false);
    // Написали прослушиватели на функции push и move
}
function push(){
    // Проверяем свойства paused и ended,т.е. если видео воспроизводиться, их значения =false
    if(!mmedia.paused && !mmedia.ended) {
        // Если видео воспроизводится,то вызываем команду паузы
        mmedia.pause();
        play.innerHTML='Play';
        window.clearInterval(Loop);
    }else{
        //Если остановлено или закончилось,вызываем запуск видео
        mmedia.play();
        play.innerHTML='Pause';
        loop=setInterval(status, 1000);
        // Вызываем каждую секунду функцию Status
    }
}
function status(){
    // Если видео не закончилось,то вычисляем длину индикатора прогресса
    if(!mmedia.ended){
        var size=parseInt(mmedia.currentTime*maxim/mmedia.duration);
        progress.style.width=size+'px';
    }else{
        progress.style.width='0px';
        play.innerHTML='Play';
        window.clearInterval(loop);     
    }
}
function move(e){
    if(!mmedia.paused && !mmedia.ended){
        var mouseX=e.pageX-var.offsetLeft;
        var newtime=mouseX*mmedia.duration/maxim;
        mmedia.currentTime=newtime;
        progress.style.width=mouseX+'px'
    }
}
// Запустить функцию initiate после загрузки документа
window.addEventListener('load',initiate, false);

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body {
    text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
    display: block;
}
#player{
    width                : 720px;
    margin               : 20px auto;
    padding              : 5px;
    background           : #999;
    border               : 1px solid #666;
    
    -moz-border-radius   : 5px;
    -webkit-border-radius: 5px;
    border-radius        : 5px 
}
nav{
    margin: 5px 0px;
}
#buttons{
    float: left;
    width: 85px;
    height: 20px;
}
#bar{
    position: relative;
    float: left;
    width: 600px;
    height: 16px;
    padding: 2px;
    border: 1px solid #CCCCCC;
    background: #EEE;
}
#progress{
    position: absolute;
    width: 0;
    height: 16px;
    background: rgba(0,0,150,.2);
}

@muxahuk1214 · 29.11.2019, 00:50

https://jsfiddle.net/2jnbs8te/

Сообщение от SolDok

var mouseX=e.pageX-var.offsetLeft;

вот тут вот ошибка "unexpected token "var"".. что-то не правильно списали видимо..

может быть вот так надо?

JavaScript
1
var mouseX=e.pageX-mmedia.offsetLeft;

@SolDok · 29.11.2019, 11:34 **[ТС]**

Да,вы правы.Благодарю!Всё же долго мне ещё учиться с такой внимательностью..
В учебники за место var должно быть bar:

Добавлено через 11 минут
Да,вы правы.Благодарю!Всё же долго мне ещё учиться с такой внимательностью..
В учебники за место var должно быть bar:
var mouseX=e.pageX-bar.offsetLeft; вместо var mouseX=e.pageX-var.offsetLeft;
А также:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function push(){
    // Проверяем свойства paused и ended,т.е. если видео воспроизводиться, их значения =false
    if(!mmedia.paused && !mmedia.ended) {
        // Если видео воспроизводится,то вызываем команду паузы
        mmedia.pause();
        play.innerHTML='Play';
        window.clearInterval(Loop);
    }else{
        //Если остановлено или закончилось,вызываем запуск видео
        mmedia.play();
        play.innerHTML='Pause';
        loop=setInterval(status, 1000);
        // Вызываем каждую секунду функцию Status
    }
}

Не понятно почему,но в учебнике напечатано так. Когда я пытался понять как работает оператор if в этом сегменте,чуть не сломал голову. Я не мог понять, почему если видео стоит или закончилось,то мы вызываем метод Pause.Ясное дело, что ничего не работало и только после смены методов pause и play,плеер стал функционировать. Пошёл искать ещё такие же учебники и в итоге в тех,что нашёл всё тот же код с ошибкой.Но возможно исправили в более поздней версии издания,так как в свободном доступе нашёл только от 2013 года.

Теперь код js выглядит так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function initiate(){
    // initiate так как она инициирует приложения после загрузки окна
    maxim    =600;
    mmedia   =document.getElementById('media');
    play     =document.getElementById('play');
    bar      =document.getElementById('bar');
    progress =document.getElementById('progress')
    // Объявили глобальные переменные
 
    play.addEventListener('click', push, false);
    bar.addEventListener('click', move,false);
    // Написали прослушиватели на функции push и move
}
function push(){
    // Проверяем свойства paused и ended,т.е. если видео воспроизводиться, их значения =false
    if(!mmedia.paused && !mmedia.ended) {
        // Если видео воспроизводится,то вызываем команду паузы
        mmedia.pause();
        play.innerHTML='Play';
        window.clearInterval(Loop);
    }else{
        //Если остановлено или закончилось,вызываем запуск видео
        mmedia.play();
        play.innerHTML='Pause';
        loop=setInterval(status, 1000);
        // Вызываем каждую секунду функцию Status
    }
}
function status(){
    // Если видео не закончилось,то вычисляем длину индикатора прогресса
    if(!mmedia.ended){
        var size=parseInt(mmedia.currentTime*maxim/mmedia.duration);
        progress.style.width=size+'px';
    }else{
        progress.style.width='0px';
        play.innerHTML='Play';
        window.clearInterval(loop);     
    }
}
function move(e){
    if(!mmedia.paused && !mmedia.ended){
        var mouseX=e.pageX-bar.offsetLeft;
        var newtime=mouseX*mmedia.duration/maxim;
        mmedia.currentTime=newtime;
        progress.style.width=mouseX+'px'
    }
}
// Запустить функцию initiate после загрузки документа
window.addEventListener('load',initiate, false);

И всё работает!Ещё раз благодарю за вашу внимательность!

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

Видеоплеер на JS

Решение