1

我想从移动页面上的锚链接启动全屏视频。

<a href="javascript:void();" click="openVideo();">PLAY</a>

我们正在寻找一种类似于 iOS HTML5 视频体验的跨设备体验，其中图标替换了缩略图。

该视频位于 Brightcove。我不需要使用 Brightcove SmartPlayer HTML5，但希望它能够更好地降级。

通过调整视频元素的大小并将其隐藏在播放图标下并使用 JavaScript 启动视频，我已经能够在大多数 iOS 设备上获得一个有缺陷的版本，但是 Andriod 设备希望在图标下播放视频，这是有道理的. 我宁愿不混淆这个解决方案。

CSS：

<style>
#play {
    display:block;
    border-radius:5px;
    border:1px solid #333;
    width:100px;
    height:100px;
    text-align:center;
    vertical-align:middle;
    text-decoration:none;
    font-size:75px;
    color:#fff;
    background-color:rgba(0,0,0,.5);
    position:absolute;
    z-index: 1;
}
#video {
    position:absolute;
    z-index: 0;
}
</style>

HTML：

<video width="100" height="100" tabindex="0" controls="controls" preload="auto" id="video">
    <source type="video/mp4;" src="video.mp4"></source>
</video>
<a href="#" id="play">&#187;</a>

JavaScript：

<script>
var video = document.getElementById('video');
var children = video.children;
for (var i=0,j=children.length; i<j; i++) {
  if (children[i].tagName.toUpperCase() == "SOURCE") {
    var canPlay = video.canPlayType(children[i].type);
    if(canPlay == "probably" || canPlay == "maybe") {
      video.src = children[i].src;
      video.load();
      break; // or return or whatever
    }
  }
}

video.addEventListener('click',function(){
    video.play();
},true);

var aVideo = document.getElementById('play');
aVideo.addEventListener('click',function(){
    video.play();
},false);
</script>
4

0 回答 0