H5 video在ios播放不了的 问题

部分苹果机型是无法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();
                
            });
        }
    });

 


版权声明:本文为chose_DoIt原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。