Question

我有一个带有<video>标记的网页，可以根据用户选择的视频链接更改其src属性。这是下面的代码：

HTML

 <video width="944" height="440" id="video" src="[url to video]" controls=""></video>

的javascript

...
obj = //link selector

try{                   
      $("#video").prop("src","video/"+$(obj).data("video"));
   }catch(err){

   }

现在我有一个奇怪的情况，在第二次调用此代码时，视频在IE中无法正常工作。因此，我决定添加一个catch语句来处理这种情况，并以一种看似有效的不同方法加载视频（即通过完全删除视频标记并使用新的src属性重新添加它）。问题是我似乎无法捕捉到它产生的视频错误。我相信这是因为调用是异步的。（作为参考，有问题的错误是MEDIA12899: AUDIO/VIDEO: Unknown MIME type.。奇怪的是，正如我之前所说，视频第一次正确加载，而不是第二次。

任何人都知道如何确定我们是否可以检测视频是否正确加载？

Answer 1

是的 - 您可以使用<video>元素提供的各种media events。

例如：

$('a.your.link.here').on('click', function(e) {
  e.preventDefault();

  $('#video')
    .attr('src', 'video/' + $(this).data('video'))
    .off('error')
    .off('canplay')
    .on('error', function() {
      alert('oh noes, an error!');
    })
    .on('canplay', function() {
      alert('can play!');
    });
});

当点击类your link here的锚时，此代码将执行以下操作：

更新<video>元素的src属性
删除<video>元素
在<video>元素上绑定两个事件处理程序 - 一个在出现错误时弹出alert，另一个在视频准备播放时弹出alert。

Answer 2

“任何人都知道我如何确定我们是否可以检测视频是否正确加载？”

虽然很高兴知道如何检测视频是否已加载，但我相信您已经明确说明的问题应该得到解决。如果你发现了手头的问题，那么知道如何检测正确加载的视频是毫无意义的ATM。的 See XY Problem

问题1 “奇怪的是，正如我之前所说，视频第一次正确加载，不是第二次”

在页面加载期间加载<video>标记时，它会加载src属性的网址值，就像其他任何 replaced element 一样{ {1}}或<img>。更改<iframe>属性的值时，我们可能需要先加载它才能播放。以下演示包含src标记和播放列表，用于演示<video>更改如何与.load() method一起使用。

可能的解决方案： src方法。

问题2 “load()”

视频文件的文件类型可能存在不兼容问题。我无法确定，因为您没有提供网址或使用的是哪种类型的视频。

可能的解决方案：为MP4添加 <source> 标记，并为编码为WebM视频的重复文件添加MEDIA12899: AUDIO/VIDEO: Unknown MIME type标记。< / p>
在演示中评论的详细信息

演示

<source>

// Reference the <video> tag var vid = document.getElementById('vid0'); // Reference the first <source> tag var srcA = document.getElementById('src0'); // Reference the second <source> tag var srcB = document.getElementById('src1'); // Collect all <a> into a NodeList var lnx = document.links; /* Iterate through the NodeList and regeister each <a> on click || event. || When click occurs, callback function switchSRC is invoked */ for (let i = 0; i < lnx.length; i++) { lnx[i].onclick = switchSRC; } // Pass the Event Object function switchSRC(e) { // Prevent <a> from jumping to location of href e.preventDefault(); // Set the src of the first <source> to href of clicked <a> srcA.src = e.target.href; // Set the src of the second <source> to data-webm of clicked <a> srcB.src = 'https://storage04.dropshots.com/' + e.target.getAttribute('data-webm'); /* Problem 1 - load() Method || Call load() method if there is a change in src and || fails to load. This isn't always neccessary but it || never hurts to have it just in case. */ vid.load(); // Call play() method vid.play(); }

body { font: 400 20px/1.2 Consolas; } video, ol { margin: 0; display: inline-block; float: left; }

我们可以使用javascript来判断html5视频元素的来源是否正确加载？

2 个答案:

演示