相关疑难解决方法(0)

我正在尝试构建一个适用于任何地方的视频播放器.到目前为止我要去:

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(如在几个网站上看到的,例如每个人的视频)到目前为止,非常好.

但现在我也想要一些播放列表/菜单以及视频播放器,我可以从中选择其他视频.那些应该马上在我的播放器中打开.所以我将不得不"动态改变视频的来源"(见dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ - section"让我们来看看另一部电影")用javascript.让我们暂时忘记flashplayer(以及IE)部分,我将稍后尝试处理.

所以我的JS改变<source>标签应该是这样的:

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

问题是,这在所有浏览器中都不起作用.即,firefox = O有一个很好的页面,你可以在那里观察我遇到的问题:http://www.w3.org/2010/05/video/mediaevents.html

一旦我触发load()方法(在Firefox中,请注意),视频播放器就会死机.

现在我发现当我不使用多个<source>标签,而只是标签中的一个src属性时<video>,整个事情都可以在firefox中运行.

所以我的计划是使用该src属性并使用canPlayType()函数确定适当的文件.

我是以某种方式做错了还是让事情变得复杂？

我想更新HTML5视频元素中的源标记,这样当我点击一个按钮时,无论播放什么都会切换到新视频.

我有一个Clip组件,它返回一个HTML5视频元素,源URL通过props提供.

function Clip(props) {
  return (
    <video width="320" height="240" controls autoPlay>
      <source src={props.url} />
    </video>
  )
}

我还有一个Movie组件,它包含多个URL,每个URL对应一部分电影.它还包含一个position属性,它通过记住当前正在播放的部分来充当迭代器.

class Movie extends Component {
  constructor() {
    super();
    this.state = {
      sections: [
        'https://my-bucket.s3.amazonaws.com/vid1.mp4',
        'https://my-bucket.s3.amazonaws.com/vid2.mp4'
      ],
      position: 0
    };
  }
  render() {
    const sections = this.state.sections
    const position = this.state.position

    return (
      <div>
        {position}
        <Clip url={sections[position]} />
        <button onClick={() => this.updatePosition()}>Next</button>
      </div>
    )
  }
  updatePosition() {
    const position = this.state.position + 1;
    this.setState({ position: position });
  }
}

Movie组件呈现Clip组件和"Next"按钮.单击"下一步"按钮时,我想更新位置属性,并使用部分中的下一个URL重新呈现HTML5视频元素.

截至目前,当我点击下一步HTML5视频源标签更新,但该元素继续播放上一个URL中的视频.任何人都可以帮我弄清楚如何重置视频元素？

更新: …

我有一个html5视频流,我需要在点击一下后更改源*.所以我正在做的工作,但只有在HTML中,我可以看到源更改,但我的显示没有变化,你能帮助我吗？怎么了？*源代码附加了frome xml文件.

HTML

<video autoplay loop width="960" height="540" id="video">
    <source src="video/movie_01.mp4" id="tv_main_channel">
</video>

JS

btn.on('click', function(){
    var tv_main_channel = $('#tv_main_channel'),
        d_program_source_mp4 = $(program_self).find("program_source_mp4").text();

    tv_main_channel.attr('src', d_program_source_mp4);
}

我也尝试过,append但它仍然无法正常工作

var video_block = $('#video');

video_block.empty();
video_block.append(
    '<source src="'+ d_program_source_mp4 +'">'
);

谢谢你的帮助.

我确实读过每个stackoverflow线程关于在IE9中通过javascript动态更改视频标记源,包括有用但未商定的帖子在这里和这里,但确实感觉有另一个解决方案.这是我正在尝试做的非常基本的例子:

    var video = document.getElementById('video');
    //now, use either of the lines of code below to change source dynamically

    video.src = "nameOfVideo";
    //or use...
    video.setAttribute("src", "nameOfVideo");

这两行代码都被Internet Explorer彻底憎恨,特别是因为在使用简单的video.getAttribute进行检查后,src肯定会被更改,即使IE实际上没有做任何事情来切换视频.

是的,有人声称,使用IE,你必须在HTML中列出src,以便在页面加载后更改它们,但我确实在stackoverflow上找到了一个通过简单的JavaScript提出解决方案的线程.(令我失望的是,我再也找不到这样做的话......我到处搜寻,相信我).

尽管如此,如果有人能提供解决方案而不使用将所有视频src放在HTML中,而是使用JavaScript动态设置/创建src,如上所示,我将非常感激.

(或者,如果你可以指向我'缺少'溢出线程的方向,测试该属性是否存在于IE中,然后以某种方式通过javascript设置src,这也将被赞赏).

我是ReactJS(0.13.1)的新手,我在我的应用程序中创建了一个组件来显示HTML5视频.

它似乎工作得很完美,但仅限于第一次选择.当您从一个视频切换到另一个视频时(this.props.video更改时),实际显示并在页面中播放的视频不会更改.

我可以<source src='blah.mp4' />在Chrome检查器中看到元素更新,但页面中实际呈现的视频不会更改,并且如果已经存在则继续播放.在Safari和Firefox中也会发生同样的事情.所有其他元素也都适当更新.

有任何想法吗？

无论如何我的组件如下:

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var sourceNodes = video.media.map(function(media){
        media = 'content/'+media;
        return ( <source src={media} /> )
      });
      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (<li><a className="greybutton" href={media}>{ext}</a></li>)
      });

      return (

        <div className="video-container">
          <video title={title} controls width="100%">
            {sourceNodes}
          </video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox"> …