Question

我想在移动页面上通过锚点链接启动全屏视频启动。

<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>

从移动设备上的锚链接启动Brightcove视频播放器全屏

0 个答案: