H5 video在ios播放不了的 问题

30 篇文章 0 订阅
12 篇文章 0 订阅

部分苹果机型是无法video播放的,所以要做判断。如果是苹果的话,直接跳转视频连接,否则插入video标签

var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
if(isIphone){
	window.location.href = videoUrl
}
    

这里我用的是video.js

<a href="javascript:void(0)" onclick="playVideo('http://vjs.zencdn.net/v/oceans.mp4')">
var _hmt = _hmt || [];
	//播放视频
	function playVideo(videoUrl){
		var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
		if(isIphone){
			window.location.href = videoUrl
		}
		try{
			hmt.push(['_trackEvent', 'videoClick', 'click']);
		}catch(e){
			console.log(e,'_hmt')
		}
	    var str=
'<video id="videoBox" controls="controls" muted autoplay="autoplay" class="video-box video-js vjs-default-skin" preload="auto">' +
		'<source id="video_path" src="'+videoUrl+'" type="video/mp4" />' +
		'<source id="video_path" src="'+videoUrl+'" type="video/ogg" />' +
'</video>'+
		'<label class="closeVideo">关闭视频</label>';
		$('body').append(str);
			var player = videojs('videoBox', {
				"controls": true,
				"autoplay": true,
				}, function() {
	            this.play(); // 开始播放
	          });

				$('.video-box').show();
				$('.closeVideo').click(function(){
					player.pause();
					player.dispose();
					$('.closeVideo').remove();
				});
			}

网络上其他人没有引用videoJS的做法,其实更加简洁,只是公司之前有人用videoJS,我就直接copy了 

$(function(){
        var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
        if (isIphone) {
            $(".play_video").click(function(){
                window.location="视频的绝对地址url"
            });
        }
        else {
            $(".play_video").click(function(){
                
                var videoHtml = "<video id=\"video_span\" class=\"url_video\" src=\"视频的绝对地址url\" x-webkit-airplay=\"true\" webkit-playsinline=\"true\" poster=\"视频封面图片的绝对地址\" preload=\"null\" loop=\"loop\" autoplay  controls=\"controls\"></video>"
                $("#video_div").html(videoHtml)
                $(".video").show();
                
            });
        }
    });

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值