Видео с пользовательскими элементами управления с использованием HTML5 видео и Javascript - PullRequest
Новая
       22

Видео с пользовательскими элементами управления с использованием HTML5 видео и Javascript

5 голосов
/ 07 октября 2011

Я пытаюсь создать видеоплеер HTML5 без элементов управления по умолчанию, которые будут воспроизводить / приостанавливать, просто щелкая видео (или накладывая элемент div).Я хочу полностью скрыть элементы управления по умолчанию.Я хочу, чтобы пользователь мог только приостановить / воспроизвести, нажав на видео.Это возможно?Моей первоначальной стратегией было наложение прозрачного элемента над элементом, который служил бы моей кнопкой воспроизведения / паузы.Ниже приведены HTML и javascript, которые я начал, но мне нужно немного помочь.Спасибо всем! 

<!-- Video -->
<div style="height:980px;height:540px;">
    <div style="z-index:100;position:absolute;">
        <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
            <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
        </video>
    </div>
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
    var videoEl = $('#myVideo');
    playPauseBtn = $('#imgPoster');

    playPauseBtn.bind('click', function () {
        if (videoEl.paused) {
            videoEl.play();
        } else {
            videoEl.pause();
        }
    });

    videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->

Ответы [ 2 ]

2 голосов
/ 07 октября 2011

Нет необходимости в двух атрибутах id в теге видео, и нет необходимости в отдельном теге источника, если используется только один формат файла, а видео и постер, на который вы ссылаетесь, не существует.

В любом случае, пример ниже: 

<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>

<script type="text/javascript">
  $("#myVideo").bind("click", function () {
    var vid = $(this).get(0);
        if (vid.paused) {
          vid.play();
        } else {
          vid.pause();
        }
  });
</script>

РЕДАКТИРОВАТЬ: добавление скрипки: http://jsfiddle.net/SKfBY/

Быстро взглянул на твой сайт, и видео классное :-) Если вы присмотритесь, вы увидите, что добавлены два файла jQuery, что не является проблемой, но вам нужен только один, второй замедлит загрузку вашей страницы. Тоже не проблема, но вы должны рассмотреть возможность использования типа документа HTML5, как показано ниже, так как элемент video - это HTML5, но большинство браузеров все равно это поймут. Кажется, проблема в моей ошибке, jsFiddle автоматически вставляет функцию $ document.ready, и я забыл ее в своем примере, поэтому она не работает для вас.

Вот полное изложение того, как я написал бы, я удалил для вас оба экземпляра jQuery и заменил его на версию jQuery от Google, которая обычно лучше, а также, вероятно, вам следует удалить все сценарии, которые вы не используете. не требуется, как удаление swfObject, если сайт не содержит флэш-файлов с использованием swfobject и т. д. 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
    $(document).ready(function() {  
      $("#myVideo").bind("click", function () {
        var vid = $(this).get(0);
            if (vid.paused) {
              vid.play();
            } else {
              vid.pause();
            }
      });
    });
</script>
</head>
<body>
    <video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
    </video>
</body>
</html>
0 голосов
/ 24 декабря 2012

У меня работает этот код: 

function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}

Но установка времени на 0 перематывает только видео; нет воспроизведения. Поэтому я хотел воспроизвести видео после перемотки и придумал следующее: 

function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}

Вот кнопки: 

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

Мои два цента стоят ...

Приветствия

...