H5 video在ios播放不了的问题

最新推荐文章于 2025-05-08 16:37:57 发布

Do_It_Better

最新推荐文章于 2025-05-08 16:37:57 发布

阅读量8k

点赞数

CC 4.0 BY-SA版权

分类专栏：功能实现 js JQuery

本文链接：https://blog.youkuaiyun.com/chose_DoIt/article/details/90231119

功能实现同时被 3 个专栏收录

41 篇文章

订阅专栏

30 篇文章

订阅专栏

JQuery

12 篇文章

订阅专栏

本文介绍了一种针对苹果设备的视频播放优化方案，通过判断设备类型，实现iOS直接跳转播放，非iOS环境下则使用video.js进行视频标签插入，确保跨平台视频播放的流畅性和兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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