Возникли проблемы при смене видео

Question

Возникли проблемы при смене видео

0

Я использую html5 и jQuery. Я использую стандартный видеоплеер, который поставляется с браузером Chrome. У меня есть две кнопки, которые изменяют содержимое атрибута src в исходном теге. Я знаю, что это изменяется, когда я открываю окно Inspect Elements и перебираюсь к исходному тегу, когда атрибут src изменяется каждый раз, когда я нажимаю другую кнопку. Я не знаю, какую команду я могу использовать для перезагрузки пользовательского интерфейса проигрывателя видео в моем скрипте. код:

<head>
<title>video display</title>
<style type="text/css"> 
ul {position : absolute; top:20%; left:70%;}
li {list-style: none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

<script>
$(document).ready(function() {
 $("#dogs").click(function() {
  $("#src").attr("src", "../video/dogs.webm");
 });
 $("#fish").click(function() {
  $("#src").attr("src", "../video/fish_dryer.webm");
 });
}); 
</script>

</head>
<body>
    <ul>
        <li><input id="fish" type="button" value="fish dryer" /></li>
        <li><input id="dogs" type="button" value="dogs" /></li>
    </ul>
<video controls>
   <source id="src" src="../video/fish_dryer.webm" type"video/webm">
</video>
</body>

вы можете посмотреть его здесь: http://www.jimslounge.com/myStuff/changeVideo.html

//////////////Фиксированная версия \\\\\\\\ просто замените ваше видео, и оно будет работать. Спасибо Александру Фаркасу за решение!

<head>
<title>change video</title>
<style type="text/css"> 
ul {position : absolute; top:20%; left:70%;}
li {list-style: none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
 $("#dogs").click(function() {
     $("#src")
      .prop("src", "../video/dogs.webm")
      .closest('video')
      .trigger('load');
      video.play();
  });
    $("#fish").click(function() {
    $("#src")
      .attr("src", "../video/fish_dryer.webm")
      .closest('video')
      .trigger('load');
      video.play();
 });
}); 
</script>
</head>
<body>
    <ul>
        <li><input id="fish" type="button" value="fish dryer" /></li>
        <li><input id="dogs" type="button" value="dogs" /></li>
    </ul>
<video controls>
   <source id="src" src="">
</video>
</body>

jimeast 24 май 2014, в 07:57

Источник

0

Вы пытались установить свойство src вместо соответствующего атрибута?
John Dvorak 24 май 2014, в 05:55
0

Не могли бы вы показать мне пример этого свойства src?
jimeast 24 май 2014, в 06:14
0

для jQuery API - просто измените attr на prop . Для общего различия - атрибут - это то, что вы пишете в HTML, а свойство - это то, что действительно применяется. в DOM API elem.src = устанавливает свойство, elem.setAttribute("src", устанавливает атрибут).
John Dvorak 24 май 2014, в 06:23

Показать ещё 1 комментарий

Теги:

jquery

html5

1 ответ

Ещё вопросы

Вы пытались установить свойство src вместо соответствующего атрибута?
Не могли бы вы показать мне пример этого свойства src?
для jQuery API - просто измените attr на prop . Для общего различия - атрибут - это то, что вы пишете в HTML, а свойство - это то, что действительно применяется. в DOM API elem.src = устанавливает свойство, elem.setAttribute("src", устанавливает атрибут).

alexander farkas · Accepted Answer · 2014-05-24T05-40-00.000Z

Вам нужно вызвать метод load на элемент видео. Изменение attr <-> prop не имеет значения, поскольку атрибуты и свойства отражаются друг от друга (в 99% случаев).

$("#src").prop("src", "../video/fish_dryer.webm").closest('video').trigger('load') ;

Я вижу, что attr и prop кажутся взаимозаменяемыми, они оба меняют src, но все равно ничто не может изменить видео. Я делал такие вещи во Flash, иногда создавал видеоплеер с нуля, иногда передавал параметры существующему проигрывателю. Интересно, есть ли где-нибудь рецепт javsScript для создания простого html5-видеоплеера?
Прогресс!! Ваш код вносит изменения, я не скопировал его правильно с первого раза. Теперь я могу переключаться между сушилкой для рыбы и собаками, но контроль исчез.
Все, что мне нужно было сделать, чтобы это работало, это добавить video.play (); в конце.